Question

在视图中，有三个复选框可以更改$ scope.colorChoice的三个值的状态。

我想编写一个函数，将每个真实颜色与JSON列表中的相应颜色进行比较。如果一个人的阵列中至少有一种颜色已被检查为真，应显示人名。

我怎么写这样的功能？

到目前为止，我到目前为止：

JSON列表：

  [
    {
    "name": "kevin",
    "colors": ["red, green"]
    },
    {
    "name": "hans",
    "colors": ["green"]
    },
    {
    "name": "jolene",
    "colors": ["red, blue"]
    },
    {
    "name": "peter",
    "colors": ["blue"]
    }
  ]

复选框：

<label ng-repeat="(item,enabled) in colorChoice">
    <input type="checkbox" ng-model="colorChoice[item]">
</label>

控制器：

$scope.colorChoice = {
    red: false,
    green: false,
    blue: false
};

例如：

    $scope.colorChoice = {
    red: true,
    green: false,
    blue: true
};

...会显示： Kevin，Jolene，Peter

感谢您的帮助！

VIN

Answer 1

您可能想要研究的是角度检查表模型，

http://vitalets.github.io/checklist-model/

我不会解决您的问题，因为我发现您已经在处理它将为您处理的问题。我发现它非常干净，可以用于像你这样的目的。

使用该colorChoice对象，无论你是否使用angular-checklist-model，你都可以这样做：

HTML

<ul>
    <li ng-repeat='person in people | filter: colorFilter'>{{person.name}}</li>
</ul>

控制器过滤功能

$scope.colorFilter = function(person) {
    for (var i = 0; i < person.colors.length; i++) {
        var color = person.colors[i];
        if ($scope.colorChoice[color] == true)
            return true;
    }
    return false;
};

我喜欢使用像这样的角度滤波器，返回true或false的函数。对于这样的情况，它们可以非常通用。 angular filter guide

Answer 2

谢谢凯尔 - 清单模型看起来非常有趣。

我现在提出以下解决方案：

首先是一个小帮助函数来过滤掉所有激活的复选框：

$scope.colorChoiceTrue = function () {
        var result = [];
        for (var key in $scope.colorChoice) {
            if ($scope.colorChoice[key] === true) {
                result.push(key);
            };
        };
        return result;
    }

搜索数组中字符串的另一个辅助函数：

$scope.searchStringInArray = function (str, strArray) {
        for (var j = 0; j < strArray.length; j++) {
            if (strArray[j].match(str)) return true;
        }
        return false;
    }

最后，此函数返回至少有一种颜色与colorChoice匹配的每个人：

$scope.peopleSelected = function () {
    var result = [];
    angular.forEach($scope.people, function (entry, key) {
        if ($scope.searchStringInArray(entry.color, $scope.colorChoiceTrue())) {
            result.push(entry.name);
        };
    });
    return result;
};

Angularjs过滤器 - 比较多个复选框boolean与JSON列表，显示联合

2 个答案: