The ng-style directive is not functioning properly

After selecting a category, I attempted to change the color using "ng-style" in my HTML code. However, it seems that the color change is not taking effect.

This is the snippet from my HTML code:

<div ng-repeat="item in ListExpense" ng-class-odd="'item item-icon-left desc-expense a'" ng-class-even="'item item-icon-left desc-expense b'">
    <i class="icon ion-ios-pricetags" ng-style="{'color': selectedColor[$index]}" ng-click="showPopover($event, $index, item.ExpenseId, item.CategoryId)"></i>

    <div class="col description" ng-click="showEditExpense(item.ExpenseId)">{{ item.Title }}</div>
    <div class="col cost" ng-bind="item.Amount | currency:'':0"></div>
  </div>

This is the code for my popup:

<div id="popup">
 <ion-scroll style="height: 190px;">
  <label ng-repeat="item in ListCategory" for="{{item.Name}}">
   <input type="radio"
          ng-model="myCategory"
          ng-value="item.CategoryId"
          ng-click="closeInController(item.CategoryId, ItemId, paramDate)"
          id="{{item.CategoryId}}"
          name="category">
   {{item.Name}}
    <br>
 </label>
 </ion-scroll>
 </div>

Additionally, this is the relevant section of my controller.js file for showing the category selection popup:

 // Controller Popover tags expense
.controller('PopOver', function($scope, $ionicPlatform, $ionicPopover, Category, Expense) {
$ionicPlatform.ready(function() {
// Code Snippet Omitted for Brevity

$scope.showPopover = function($event, index, ExpenseId, CategoryId) {
  console.log(CategoryId);
$scope.myCategory = CategoryId;
$scope.item_index = index;
$scope.ItemId = ExpenseId;
$scope.popover.show($event);// 
}

$scope.closeInController = function(selectedItem, ExpenseId, paramDate, color, cindex) {

  Expense.updateCategory(selectedItem, ExpenseId);
  Expense.getByDate(paramDate).then(function(res) {
    console.log(res);
    $scope.ListExpense = res;
});
  $scope.popover.hide();
  $scope.selectedColor = {};
  $scope.selectedColor[cindex] = color;
  console.log(cindex + ' -- ' + color);
};

});
})

I encountered an error where 'undefined' values are being displayed. Can anyone assist me with this issue?

Thank you in advance!

Answer №1

Attempt switching up your script:

Get total expenses per category for next month and year:
Expense.totalPerCategory(mm+1, yy).then(function(res) {
    console.log(res);
    $scope.ListExpense = [];
    for (i = 0; i < res.length; i++) { 
        $scope.ListExpense.push({
            color: res[i].BgColor
        };
    }
})

Answer №2

Check out my response to a similar inquiry over here: ng-style blues You might want to experiment with using "style" instead, so adjust your code like this:

 <i class="icon ion-ios-pricetags" style="color:selectedColor[$index]" ng-click="showPopover($event, $index, item.ExpenseId, item.CategoryId)"></i>

Give it a shot. If that doesn't work, consider creating a function that generates the style string (e.g. "color:replace-with-color-here") and update the style to "style=colorFunct(selectedColor[$index])" to see if it helps.

Hope this helps, best regards.

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

Creating a layout with an image positioned on the left and text on the right within a block using CSS

Can anyone provide guidance on how to design a layout similar to the one shown in this image: https://i.sstatic.net/RYAuA.png? I want the image on the left and text on the right, with responsiveness. Any help would be greatly appreciated. Thank you! < ...

Looking for an Icon to accompany the navigation bar on Bootstrap

Can anyone assist me with adding an icon next to the navbar starting from the word "Dashboard" without any spacing using only Bootstrap? Please note that I have tried options like offset-5 and ms-5 but they did not achieve the desired result. <div id=& ...

Show Zeroes in Front of Input Numbers

I am working with two input fields that represent hours and minutes separately. <input type="number" min="0" max="24" step="1" value="00" class="hours"> <input type="number" min="0" max="0.60" step="0.01" value="00" class="minutes"> This se ...

Preventing scrolling in one div while focusing on another div

I am currently in the process of creating a website that functions as a single page site. The main feature of the site is a masonry grid of images. When a user clicks on an item, a detailed panel slides in from the left. Once the panel is closed, it slide ...

Execute AngularJS directive once TypeKit finishes loading the font

I recently created a custom directive to retrieve the position of text on a page, but unfortunately, the position returned is incorrect due to the directive running before TypeKit has fully loaded the font. app.directive('myDirective', function( ...

Allow the div to break out of the overflow: hidden property without disrupting the overall page layout

Currently, I am attempting to separate a child element from its parent that has overflow: hidden applied. The main reason for restricting the dimensions of the parent is for a JavaScript workaround. I have experimented with positioning the child element, ...

How can I transfer variables between controllers using a service in AngularJS?

I am trying to pass a variable between controllers using a service. Below is the implementation of the service that passes the variable (in this case, a song id): 'use strict'; angular.module('PortalApp') .service('ActionbarSer ...

Simulate a service during an end-to-end test using Protractor

When writing a functional test for my app, I am seeking a way to mock my loginService service in order to speed up the testing process. Specifically, I do not wish to mock the $http service, but rather the service that interacts with it internally. However ...

Backdrop dimming the Material UI Modal

My modal is designed to display the status of a transaction on my website, but I'm facing an issue where the backdrop dimming effect is being applied over the modal. Instead of appearing white as intended, the modal ends up having a dark gray tint. I ...

Is there a way to resolve the issue of this div sticking to the top of the

I am currently working on building a portfolio website. One issue I'm facing is that my first div (for the "About Me" section) appears below my second div on the webpage. My goal is to have the first div displayed in full screen on both mobile and des ...

Using ng-bind-html within a ng-repeat loop

Currently, I am working on developing a custom autosuggest feature where a web service is queried with a search term to retrieve a list of suggestions that are then displayed. My main obstacle lies in trying to highlight the matching term within the sugges ...

External CSS File causing improper sizing of canvas image

I have been working on implementing the HTML5 canvas element. To draw an image into the canvas, I am using the following javascript code: var img = new Image(); var canvas = this.e; var ctx = canvas.getContext('2d'); img.src = options.imageSrc; ...

AngularJS 2 - error when trying to bind inner properties: ERROR: Unable to access property value due to undefined variable

I have been troubleshooting a problem with my AngularJS 2 app using Typescript. The issue arises when I attempt to access a property from the Typescript class in the HTML page using data binding. I have provided the relevant files below for reference. If t ...

Maximizing efficiency in website reloading and development with Sinatra using Ruby along with Rack and Haml

In my efforts to build a Sinatra website, I have gone from using Shotgun to now utilizing Rerun for reloading my Thin server whenever I make file edits. However, the development cycle is proving to be quite time-consuming. Even small changes to CSS, JavaS ...

Choosing various choices using AngularJS

My goal seems simple using vanilla JS, but with AngularJS, I'm looking for the best way to achieve it within the framework. I aim to update the selected options in a multiple select box without adding or removing any options. Below is a snippet of my ...

Angular cookies may expire, but using the back button always revives them

Utilizing angular's cookie library, I have successfully set a cookie to store the id and passcode of a shopping cart on the backend. However, despite setting the expiration date to a past time in order to expire the cookie once the cart is purchased, ...

Building a Nested/Tree Structure with an HTML Table Component in Angular.js

Exploring Tree Structure Expand and Collapse Options: The code is currently written using an HTML table. Tackling the implementation with ng-repeat is proving to be a challenge. Here is the data structure for each row: { "id": 1, "name": "Gro ...

What is the best way to set up the correct pathway for displaying the image?

I'm currently facing a challenge with displaying an image from my repository. The component's framework is stored in one library, while I'm attempting to render it in a separate repository. However, I am struggling to determine the correct p ...

Troubleshooting: Issue with incorporating libraries into my HTML code using Ionic framework and Angular

I am currently working on developing a hybrid app using Ionic and Angular. I attempted to incorporate jQuery UI for drag-and-drop functionality, but unfortunately, it did not work as expected. Despite testing simple examples, the feature still did not func ...

Creating a spacious text box for an enhanced Ajax search feature

I'm currently working on an AJAX application that allows users to input the name of a movie, and then loads results from the database through jquery using a PHP API. However, I'm facing a challenge in implementing a text box with the following re ...