复杂的 Angular 脚本

Question

我正在创建基于 ng-repeat 的 div。我正在从数据库中获取数据。数据如下：

[
    {
        id:1,
        name:item1,
        category: [catA, catB, catC,]
    },
    {
        id:2,
        name:item2,
        category: [catB]
    },
    {
        id:3,
        name:item3,
        category: [catA, catB]
    }
]

此数据进入范围。所以：

myApp.controller("myCtrl", function($scope, $http){

    var cat = "catA";

    $http.get("/getdata", function(response){
        if(response.data){
            $scope.items = response.data;

            if(response.data.category==cat){    // Check if the var cat is present in the array. How to do this?
                //set ng-class for the button in the div to 'active'. How to do this?
            }

        } else {
            $scope.message = "Nothing returned.";
        }
    });

    $scope.send = function(n){
        $scope.isActive = !$scope.isActive;
   }
});

我正在使用 ng-repeat ：

<div ng-repeat="item in items" class="myclass">
        {{item.name}}
        <button class="myRight" ng-class="{'active': isActive}" ng-click="send(item.id)"> click </button>
</div>

活动类：

.active { background: #FF735C; color:white;}

因此，根据数据中接收到的category数组中存在的var cat，确定按钮的类别。如果单击该按钮，则该类将切换。我不能使用 $index 作为按钮来传递 var，就好像数据被过滤一样，没有呈现正确的索引。

我可以使用 ng-class 吗？有没有其他更简单的方法来实现这一点？

请帮忙。非常感谢。

Answer 1

希望这能解决您的问题，ng-class 绝对是正确的方法。

// our store of active buttons/items
$scope.buttonActive = {};

$http.get("/getdata", function(response)
{
    if (response.data)
    {
        angular.forEach(response.data, function (item)
        {
            // create a list of active items based on if it has a category
            $scope.buttonActive[item.id] = item.category.indexOf(cat) !== -1;
        });

        $scope.items = response.data;
    }
    else
    {
        $scope.message = "Nothing returned.";
    }
});

/**
 * @param id
 */
$scope.send = function (id)
{
    // toggle the boolean value for this button/item's state
    $scope.buttonActive[id] = !$scope.buttonActive[id];
}

在模板中：

<div ng-repeat="item in items" class="myclass">
    {{ item.name }}
    <button class="myRight" ng-class="{ 'active': buttonActive[item.id] }" ng-click="send(item.id)">click</button>
</div>

更新

if 语句本质上是通过将一个或多个条件评估为布尔值来工作的。

if (true)
    doSomething();

所以我在那条线上所做的是：

// if item.categories array contains the category in 'cat' variable
if (item.category.indexOf(cat) !== -1)
    $scope.buttonActive[item.id] = true;
else
    $scope.buttonActive[item.id] = false;

但是看到我根据另一个布尔值分配一个布尔值，我不妨只使用初始条件的结果。

var isInArray = item.category.indexOf(cat) !== -1;

$scope.buttonActive[item.id] = isInArray;

或者只是：

$scope.buttonActive[item.id] = item.category.indexOf(cat) !== -1;