Question

我不是Angular而是在这里和那里不断碰到小问题。我似乎无法显示我的数组，它只显示{{products}}

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定义中忘记了一些逗号。当角度无法评估{{ curly brackets }}时，请务必检查您的开发控制台是否有错误。

例如：

{
  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}}

这是一个固定的小提琴：

http://jsfiddle.net/a01g8wyp/

ng-repeat不迭代数组

1 个答案: