What are the various ways to apply unique padding styles to ng-repeat items?

Take a look at this image. I need to position my 6 boxes on the 6 vertical lines above the image. I am struggling with applying different padding styles to my ng-repeat directive. Although I tried using [ng-class], it doesn't seem to work as expected. I have looked through various online resources but all the discussions revolve around ng-class. I'm not sure if I'm using it correctly or not. Your assistance is greatly appreciated.

<div style="background-color: white">

<div id="container" class="row" style="padding-left: 150px">
    <div class="col-md-6" ng-repeat="row in msg.payload"
         ng-class=" {'evenClass': $even, 'oddClass': $odd , 'firstClass':$first,'lastClass':$last} ">
        <div class="plan col-md-4">
            <h3>Voltage : {{row.Voltage}}
                <span ng-class="row.Switch " ng-if="row.Switch == 'OFF'"
                      style="background: red">{{row.Switch}}</span>
                <span ng-class="row.Switch" ng-if="row.Switch == 'ON'"
                      style="background: green">{{row.Switch}}</span>
            </h3>
            <script>
                $(document).ready(function () {
                    setInterval(function (blinker) {
                        $("span").fadeIn(500);
                        $("span").fadeOut(500);

                    }, 1000)

                });
            </script>
            <div class="Amp">Amp</div>
            <ul>
                <li><b>P1: </b>{{row.P1}}</li>
                <li><b>P2: </b>{{row.P2}}</li>
                <li><b>P3: </b>{{row.P3}}</li>
                <li><b>N: </b>{{row.N}}</li>
            </ul>
        </div>
    </div>
</div>

Here is my CSS:

<style>
body, html {
    height: 100%;
    margin: 0;
    /*background: #303030;*/
}

.bg {
    /* The image used */
    background-image: url("http://skymics.com/Energy/sampleschematic.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#container {
    /*margin: 100px auto;*/
    text-align: center;
}

#container .plan {
    font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
    text-shadow: 0 1px rgba(255, 255, 255, .8);
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    padding: 20px;
    float: left;
    opacity: 0.9;
    position: relative;
}

/* Styles for different elements */

.evenClass {
}

.oddClass {
}

.firstClass {
    padding-top: 40px;
}

.lastClass {
}

Answer №1

You have to be careful with how you use ng-class!

The correct way to use it is shown below-

ng-class="{'evenClass': $even, 'oddClass': $odd, 'firstClass': $first, 'lastClass': $last}"

If you have a class defined in a variable (e.g. var className = 'someClass';), you would use it like this-

ng-class="someClass"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Running the gulp uncss command with regex to ignore specific elements is not functioning as expected

I have been attempting to integrate uncss into my gulp workflow. In order to exclude certain classes, such as those added through javascript, I am specifying these classes with "ignore" (specifically, I am trying to remove the css from the jquery plugin m ...

What is the process for extracting HTML code from a website and converting it into a string for use in VB?

Storing the page source in the variable HTML is known to me. Dim Client As New WebClient URL = Console.Readline HTML = Client.DownloadString(New Uri(URL)) However, it has been observed that not all elements from a website are saved using this method. For ...

Is add1 missing from the DOM? Learn how to include it

Having an issue with Java-Script and an HTML form. The scenario is that there's a main form with an "Add" button, which when clicked should display a second form. Next to the second form is another button labeled "Add1," which ideally should trigger ...

Rejuvenate a just-launched window.open starting from the about:blank

After receiving data from an ajax result, I am trying to open a pdf in a new window. However, the pdf viewer is only displayed if I manually resize the window (using manual hotspot resizing). How can I ensure that the contents display properly in its popu ...

Combining two functions in AngularJS

I have two factories for readability, along with one controller. I am unsure if it is feasible, but I am interested in combining the results of the two factories into one variable. code vm.result = []; vm.validate = validate; function validate(password1, ...

My method for updating form input properties involves switching the disable attribute from "false" to "true" and vice versa

I have a form that uses Ajax to submit data. Once the user submits the form, the text is updated to indicate that the data was sent successfully, and then the form is displayed with the fields filled out. I want to display the form but prevent users from r ...

Is there a solution to fix the issue with IE causing hover effects not to

I'm currently in the process of designing a website, and I have implemented some image hover effects that reveal elements within the image when you hover over it. These effects are functioning correctly on Chrome, Safari, and Firefox; however, they ar ...

When the button is clicked, bind the value to an object using the specified key in

I'm fairly new to Vue and I'm looking to generate buttons based on my data and show their information when clicked. The 'pets' object contains keys for id and info. (My actual data is more extensive and my code is a bit more complex, bu ...

The header grid will disappear in the p-dialog when the browser is minimized

Check out this informative article on creating a dynamic dialog box using PrimeNG here Take a look at the image below to see how the dialog box appears when opened: https://i.sstatic.net/nUq1d.png One issue I am facing is that the grid header gets hidd ...

Create an HTML form that sends email notifications using a third-party form backend platform

I recently designed a form using Webflow and integrated it with Getform.io for the backend platform. Everything is running smoothly, including data collection and file uploads. However, I now want to enhance the form by enabling it to automatically send ...

Is there a way to modify the FixedTableHeader jQuery plugin to include a fixed first column in addition to the fixed header?

I've been experimenting with a jQuery plugin I found at to create a stylish table with fixed headers, sorting options, and other interesting features. While the plugin is great, I also considered using jqGrid for its impressive capabilities. However, ...

Tips for creating a dynamic system to continuously add more HTML tables in PHP

I am working with an HTML table where the data is retrieved from a database. I need to add new rows to enter additional data, but the numbering does not continue from the last number. My question is how can I increase the numbering in the table. Please ref ...

The Django form isn't displaying properly after being imported into the HTML file

Can anyone help me figure out why my Django form isn't appearing in my HTML template? I've tried everything on this site and nothing seems to work. Any suggestions? views.py def handleForm(request): context = {} if request.method == &apo ...

Can you explain the purpose of the "then" function in Bootstrap UI?

After reviewing the documentation for Bootstrap UI at http://angular-ui.github.io/bootstrap/, I am now exploring modals. However, I am having trouble understanding the following lines: modalInstance.result.then(function (selectedItem) { $scope.selecte ...

Having trouble with the Tap to copy discount code function not working in the Shopify cart drawer?

Our goal is to implement tap to copy functionality for code snippets on our Shopify website. It works seamlessly on the product detail page, but in the cart drawer, it only functions properly after the second page load. https://i.sstatic.net/xzMVY.png ...

Dealing with rejected responses in AngularJS using UI-Router

I am utilizing a Service in Angular to encapsulate my API requests: var ConcernService = { list: function (items_url) { var defer = $q.defer(); $http({method: 'GET', url: api_url + items_url}) .succe ...

Is it possible to modify the appearance of the element that was just clicked on?

Hello everyone, I'm currently working on a form with different inputs, all with the same class: <input type="text" name="username" class="field" /> <input type="text" name="email" class="field" /> I'm trying to figure out how to ch ...

The validation of form.$invalid appears to be malfunctioning when using the Angular UI date picker

There are two fields on the form, one for selecting a due date and another for entering a number. The due date field is a date picker where you can choose a date or manually enter a number to set the date. The create button gets enabled only when setting ...

Creating a multiline centered navigation bar item using Bootstrap 4

My navigation bar is functioning properly with single-line items, but encounters alignment issues when dealing with multi-line items: <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> ...

Ways to access the HTML content of a component in vue.js

I have a unique html template displayed below CustomTemplate.vue <template> <div class="content custom-page"> <md-card class="page-display"> <md-card-header class="page-header"> <md-card- ...