Использование нескольких переключателей для фильтрации нг-повтор свойства булевых объектов

Question

У меня есть JSON массив данных объектов Ковер (see plunker)

designerApp.controller('CarpetCtrl', ['$scope', function ($scope) { 
$scope.carpetList = 
    [ 
    { 
     "Carpet": { 
      "name": "red carpet", 
      "standard": true, 
      "wide": false, 
      "extra_wide": true 
     }, 
    }, 
    { 
     "Carpet": { 
      "name": "blue carpet", 
      "standard": false, 
      "wide": true, 
      "extra_wide": true 
     }, 
    }, 
    { 
     "Carpet": { 
      "name": "green carpet", 
      "standard": true, 
      "wide": true, 
      "extra_wide": false 
     }, 
    } 
    ]; 

}]);

Я хочу использовать переключатели для фильтрации списка - кнопки для стандартных, широких и extra_wide для фильтрации соответствующих логических значений.

Я прочесываю интернет и не могу найти кого-либо еще. Может ли угловая ручка это изначально?

NB Причина, по которой каждый элемент массива вводится на ковер, заключается в том, что я сократил данные, выкачиваемые из CakePHP, - в каждом элементе есть другие данные с ключом.

Answer 1

Работает Plunker.

Это то, что я изменил:

<div class="carpet_list" ng-controller="CarpetCtrl"> 
    <label>Standard Width<input type="radio" name="width" ng-model="type" value='standard' ></label> 
    <label>Wide<input type="radio" name="width" ng-model="type" value='wide' ></label> 
    <label>Extra Wide<input type="radio" name="width" ng-model="type" value='extra_wide'></label> 
    <br> 
    <br> 
    {{type}} 
    <h2>Carpet List</h2> 
    <ul class="thumblist"> 
     <li class="thumb" ng-repeat="item in carpetList"> 
     <label ng-show="item.Carpet[type]">{{item.Carpet.name}}</label> 
     </li> 
    </ul> 
    </div> 

Как вы можете видеть, что идея состоит в том, чтобы показать ковры «типа» правда.

Answer 2

Вот способ: plunker

Модель радиостанции является одной переменной, содержащей тип ковра для отображения

$scope.filters = { 
    width: 'standard' 
}; 

Тогда вы показываете только элемент, на котором это свойство верно.

<li class="thumb" ng-repeat="item in carpetList" ng-show="item.Carpet[filters.width]"> 

Там, наверное, «чище» путь с помощью фильтров, но, видимо, вы не можете выбирать один элемент, вы должны фильтровать весь массив