ng-repeat not iterating array

Question

Я не склоняюсь к Угловому и просто продолжаю сталкиваться с небольшими проблемами здесь и там. Я не могу показаться, чтобы получить мой массив для отображения, оно просто показывает {{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. Когда угловой не может оценить {{ curly brackets }}, обязательно проверьте свою консоль dev на наличие ошибок.

Например:

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