ng-style does not work

Question

I tried to change the color after selecting a category, I try to use the "ng-style". but it does not work.

this my code html :

<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'">
    <!-- this to change color -->
    <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 my code for 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>

and this my contoller.js, and show popup to select category :

 // Controller Popover tags expense
.controller('PopOver', function($scope, $ionicPlatform, $ionicPopover, Category, Expense) {
$ionicPlatform.ready(function() {
$scope.myFormCat = {};
$scope.myFormCat.name = "Audit Form";
$scope.myFormCat.submitCategory = function(ExpenseId, event) {
    var theCategory = $scope.myFormCat.Category;
    if (theCategory === undefined) {
        //
    } else {
        var cat = {};
        cat.Name = theCategory;
        cat.Type = 'D';
        Category.add(cat).then(function(res) {
            var lastId = res.insertId;
            Expense.updateCategory(lastId, ExpenseId);
        });
        Category.all('D').then(function(res) {
            $scope.ListCategory = res;
        });

        $scope.myFormCat.Category = '';

        $scope.popover.hide();
    }
};

var d = new Date();
var mm = d.getMonth();
var dd = d.getDate();
var yy = d.getFullYear();


Category.all('D').then(function(res) {
    console.log(res);
    console.log("inilah " + res.length);
    if (res.length > 0) {
        $scope.ListCategory = res;
    } else {

    }
})

 //beware of month is month + 1
Expense.totalPerCategory(mm+1, yy).then(function(res) {
    console.log(res);
    $scope.TagColor = {};
    for (i = 0; i < res.length; i++) { 
        $scope.TagColor[res[i].CategoryId] = {
            color: res[i].BgColor,
            label: res[i].CategoryName
        };
    }
})

$ionicPopover.fromTemplateUrl('templates/popoversss.html', {
scope: $scope,
}).then(function(popover) {
$scope.popover = popover;
});

$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 got error undefined -- undefined. Anyone can help me?

Thanks in advance

you are destroying your LostExpense objects so they will only have color in them. You are deleting everything else. — ribsies, Feb 24 '15 at 05:10
Also ListExpense is an object, instead of an array, so you are not assigning the color correctly. What errors are you getting? This should be giving you errors. — ribsies, Feb 24 '15 at 05:13
nothing error, when 1 reload page. only discolored 1 second, then back to its original color. — afrila gunadi, Feb 24 '15 at 05:20
i tried another way, i has edit. but i got console. undefined -- undefined. — afrila gunadi, Feb 24 '15 at 10:20

score 0 · Answer 1 · answered Feb 24 '15 at 07:14

0

Try to change your code:

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
        };
    }
})

answered Feb 24 '15 at 07:14

Bartosz Czerwonka

1,631
1
10
11

Thanks for reply, this way i've tried. but it's doesn't work. by the way, i tried another way, my post has edit.. – afrila gunadi Feb 24 '15 at 10:21

score 0 · Answer 2 · edited May 23 '17 at 11:53

See my answer to a similar question here: ng-style blues Maybe you could try with "style" instead, so change your code to:

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

and give it a try. If that fails, I would try to create a function that would return the style string (i.e. "color:whatever-color-goes-here") and change the style to "style=colorFunct(selectedColor[$index])" and see if that works.

HTH, regards.

ng-style does not work

2 Answers2