Question

我有这个数组：

    this.chapters = {
         1: { name: 'Chapter 1', show: false },
         2: { name: 'Chapter 2', show: true },
         3: { name: 'Chapter 3', show: true }
    };

我想只显示在此选择中显示值为真的章节

<select ng-model="cart.newchapter" 
        ng-options="v.name for (k, v) in cart.chapters"></select>

现在它显示了所有章节，但我需要过滤它们。我一直在尝试应用过滤器，但它没有用。你能帮助我吗？哦!我无法改变布尔类型。

Answer 1

您无法将过滤器应用于对象，仅适用于阵列。因此，您有2个选项，使用以下函数将chapters更改为数组或预过滤 chapters对象：

$scope.filter = function(chapters) {
  var result = {};
  angular.forEach(chapters, function(chapter, key) {
    if (!chapter.show) {
      return;
    }
    result[key] = chapter;
  });
  return result;
};

在HTML上：

<select ng-model="newchapter" ng-options="v.name for (k, v) in filter(chapters)"></select>

＆＃13;

angular.module('app', [])
  .controller('Ctrl', function($scope) {
    $scope.chapters = {
      1: {
        name: 'Chapter 1',
        show: false
      },
      2: {
        name: 'Chapter 2',
        show: true
      },
      3: {
        name: 'Chapter 3',
        show: true
      }
    };

    $scope.filter = function(chapters) {
      var result = {};
      angular.forEach(chapters, function(chapter, key) {
        if (!chapter.show) {
          return;
        }
        result[key] = chapter;
      });
      return result;
    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
  <select ng-model="newchapter" ng-options="v.name for (k, v) in filter(chapters)"></select>
</div>

＆＃13;

Answer 2

您需要自定义过滤器，因为内置过滤器无法与对象一起使用（您的chapters是对象），这里是您可以使用的自定义文件管理器

app.filter('objFilter',function($filter){
  return function(items,toFilter){
       var values=[];
       Object.keys(items).forEach(function(v){
         values.push(items[v]);
        });
        return $filter('filter')(values,toFilter);
  };
});


     <select ng-model="cart.newchapter" 
        ng-options="v.name for (k, v) in chapters | objFilter:{show:true} "></select>

AngularJS ngOptions按布尔字段过滤数组

2 个答案: