2015-02-24 121 views
1

我试图在选择一个类别后改变颜色,我尝试使用“ng样式”。但它不起作用。ng样式不起作用

这是我的代码的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> 

为弹出这个我的代码:

<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> 

,这我contoller.js,并显示弹出菜单以选择类别:

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

}); 
}) 

我得到错误undefined - undefined。 任何人都可以帮助我?

在此先感谢

+0

你有没有任何活塞或小提琴? – 2015-02-24 04:23:39

+0

不,我没有:( – 2015-02-24 04:26:40

+0

你正在销毁你的LostExpense对象,所以他们只会有颜色,你正在删除所有其他的东西 – ribsies 2015-02-24 05:10:30

回答

0

试图改变你的代码:

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

感谢您的回复,这种方式我已经尝试过了,但它不起作用。顺便说一句,我尝试了另一种方式,我的文章已经编辑了.. – 2015-02-24 10:21:36

+0

您能显示contoller.js的完整内容吗? – 2015-02-24 11:02:48

0

见我的回答类似的问题在这里:ng-style blues 也许你可以用“风格”尝试相反,所以更改您的代码:

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

并试试看。如果失败了,我会尝试创建一个返回样式字符串的函数(即“color:whatever-color-goes-”),并将样式更改为“style = colorFunct(selectedColor [$ index])“,看看是否有效。

HTH,问候。