Question

我在使用javascript对JSON对象/字符串中的数组字段进行复选框过滤时遇到问题。

这是我的HTML：

<div ng-app="fruit">
    <div ng-controller="FruitCtrl">

        <input type="checkbox" ng-click="includeColour('Red')"/> Red</br/>
        <input type="checkbox" ng-click="includeColour('Orange')"/> Orange</br/>
        <input type="checkbox" ng-click="includeColour('Yellow')"/> Yellow</br/>

        <ul>
            <li ng-repeat="f in fruit | filter:colourFilter">
                {{f.name}}
            </li>
        </ul>

        Filter dump: {{colourIncludes}}
    </div>
</div>

这是我的数据：

 $scope.fruit = [
        {'name': 'Apple', 'colour': ['Red']},
        {'name': 'Orange', 'colour': ['Red','Orange']},
        {'name': 'Banana', 'colour': ['Yellow','Orange']}];

原始的jsfiddle基于单项颜色字段，而不是颜色数组。

original:
{'name':'Apple','colour':'Red'}

my version:
{'name':'Apple','colour':['Red','Yellow']}

这就是 WAS 过滤的方式：

$scope.colourFilter = function(fruit) {
    if ($scope.colourIncludes.length > 0) {
    var data = fruit.colour;
        if ($.inArray(fruit.colour, $scope.colourIncludes) < 0)
            return;
    }

    return fruit;
}

我试图像这样过滤：

$scope.colourFilter = function(fruit) {
if ($scope.colourIncludes.length > 0) {
var data = fruit.colour;
for(var i in data){
    if ($.inArray(data[i], $scope.colourIncludes) < 0)
      return;
    }

    return fruit;
}

为什么我找不到匹配的任何想法？我想我没有正确扫描阵列？

Answer 1

for (var i in fruit){
    fruit[i].colour.forEach(function(color){
        console.log(color); 
    });
}

此循环逐个返回颜色数组中的项目。

基本上，fruit.color未定义b / c您没有指定要引用的数组中的哪个索引。

换句话说，水果[0]。颜色，水果[1]。颜色等等是有效的。

Answer 2

你的代码对我来说并不适用，但这至少可以让我在每个水果中打印颜色：

$scope.colourFilter = function(f) {

        angular.forEach(f.colour, function(color){
        console.log("Color is: "+color);


    });

}

迭代json数组字段

2 个答案: