javascript - ng-repeat 不迭代数组

Question

我不喜欢 Angular，只是不断地遇到一些小问题。我似乎无法显示我的数组，它只显示 {{products}}

JS fiddle :http://jsfiddle.net/u5eBH/70/

HTML:

<div ng-app="products">
    <div ng-controller="ProductCtrl">

        <input type="checkbox" ng-click="includeBrand('Brand A')"/>Brand A<br>
        <input type="checkbox" ng-click="includeBrand('Brand B')"/>Brand B<br>
        <input type="checkbox" ng-click="includeBrand('Brand C')"/>Brand C<br>

        <ul>
            <li ng-repeat="p in products | filter:brandFilter">
                {{name}}
            </li>
        </ul>
        </div>
        </div>

JS

'use strict'

angular.module('products', []);

function ProductCtrl($scope) {
    $scope.products = [
        {
                        name:  'XXX-1A'
                        brand: 'Brand A',
                        material: 'tobacco',
                        size: '00',
                        type: 'water pipe',
                        style: 'heady',
                        feature: 'bent neck, coil condensor',
                        percolator: 'dome',
                        color:'red'
                    },
                    {
                        name:  'XXX-2B'
                        brand: 'Brand B',
                        material: 'tobacco',
                        size: '00',
                        type: 'water pipe',
                        style: 'heady',
                        feature: 'bent neck, coil condensor',
                        percolator: 'dome',
                        color:'red'
                    },
                    {
                        name:  'XXX-1C'
                        brand: 'Brand C',
                        material: 'tobacco',
                        size: '00',
                        type: 'water pipe',
                        style: 'heady',
                        feature: 'bent neck, coil condensor',
                        percolator: 'dome',
                        color:'red'
                    }
                ];
            });

    $scope.brandIncludes = [];

    $scope.includeBrand = function(brand) {
        var i = $.inArray(brand, $scope.brandIncludes);
        if (i > -1) {
            $scope.brandIncludes.splice(i, 1);
        } else {
            $scope.brandIncludes.push(brand);
        }
    }

    $scope.brandFilter = function(products) {
        if ($scope.brandIncludes.length > 0) {
            if ($.inArray(products.brand, $scope.brandIncludes) < 0)
                return;
        }

        return products;
    }
}

此外，如果有人可以将我链接到一些有关“ng-repeat =“x in x”语句的更深入的讨论，我将不胜感激。我只是无法很好地理解它，无法在自己身上使用。谢谢!

Answer 1

您忘记了 JSON 定义中的一些逗号。当 Angular 无法评估 {{ curly括号}} 时，请务必检查您的开发控制台是否有错误。

例如:

{
  name: 'XXX-1A'       // <-- here you don't have a comma (same for each item)
  brand: 'Brand A',
  material: 'tobacco',
  size: '00',
  type: 'water pipe',
  style: 'heady',
  feature: 'bent neck, coil condensor',
  percolator: 'dome',
  color: 'red'
},

正如评论所指出的，它应该是 {{p.name}} 而不是 {{name}}

这是一个固定的 fiddle :

http://jsfiddle.net/a01g8wyp/