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每个数组元素在Carpet上键入的原因是因为我已经减少了从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>

正如您所看到的，这个想法是显示地板上的'type'为真。

Answer 2

这是一种方式：plunker

无线电模型是包含要显示的地毯类型的单个变量

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

然后，您只显示此属性为true的元素。

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

过滤器可能采用“更清洁”的方式，但显然你无法过滤单个项目，你必须过滤整个数组

使用多个单选按钮过滤ng-repeat布尔对象属性

2 个答案: