AngularJs，将颜色更改为(重复)列表中的单个项目

Question

我是 angularjs 新手。这是我的问题:

这是我的数据:

$scope.products = [
                       {item: "Milk", alreadyTook: false},
                       {item: "Bread", alreadyTook: false},
                       {item: "Cheese", alreadyTook: true}
                      ];

这是我的 Controller :

var mymodal = angular.module('app', []);
mymodal.controller("myCtrl", function($scope) {

    $scope.toggleSelection = function(itemObject) { 
        itemObject.item=itemObject.item;
        itemObject.alreadyTook=!itemObject.alreadyTook;
    };
});

这是我的 html:

<div ng-app="app" ng-cloak ng-controller="myCtrl">

<ul class="w3-ul">
    <li ng-repeat="x in products" ng-click="toggleSelection(x)" ng-style="{ 'color' : ({{x.alreadyTook}}) ? 'red' : 'black' }">{{x.item}}
    </li>
</ul>

我需要设置/取消设置所选单个li文本的前景色(通过鼠标单击)；我不想使用纯js或jquery。谢谢。

Answer 1

你只是误会了ng-style，你不需要插值，只需使用x.alreadyTook而不使用{{ }} :

ng-style="{ 'color' : (x.alreadyTook) ? 'red' : 'black' }"

工作中JSFiddle