Question

我正在重写一个角度选择选项，之前我正在使用一个带有许多li类的bootstrap btn-group类，它使用ng-click在我的ng-repeat列表中设置一个过滤器，它完美地工作。像这样：

<li role="menuitem">
   <a ng-click="myFilter = { moving: true }">Delivery &amp; Removals</a>
</li>

但是，在收到一些反馈后，系统会要求我将其更改为设置<select>的{{1}}，以反映所选的选项。

我已经在控制器范围中添加了一个列表，如下所示：

<option>

这是选择

$scope.taskCategories = [
    {'cat': 'Moving & Delivery', 'filter': 'moving: true'},
    {'cat': 'DIY', 'filter': 'DIY: true'},
    {'cat': 'Marketing', 'filter': 'marketing: true' }
]

这是我的ng-repeat

{{ selectedCat.filter }}
<select ng-model="selectedCat" ng-value="x.filter" ng-options="x.cat for x in taskCategories">
  </select>

为了给出一些相关性，我的ng-click过滤器的工作原理如下：

data-ng-repeat="task in vm.tasks | filter:search | filter:myFilter | filter: { filter: selectedCat.filter } : true | orderBy:predicate:reverse | filter:x as results"

然而，当我点击我的一个选择值（通过$ scope.taskCategories重复ng）时，我的ng-repeat返回0结果，这是不正确的。

如果有人能给我任何关于我哪里出错的指示，我将非常感激。提前致谢！ :)

Answer 1

您可以创建自定义过滤器并按对象内的属性进行搜索，如下所示：

(function(angular) {
  'use strict';
angular.module('ngRepeat', ['ngAnimate'])
.controller('repeatController', function($scope) {
  $scope.tasks = [
  			{
        'created': "2016-07-02T21:01:56.095Z",
        'description':"hang it",
        'dueDate':"2016-07-02T22:00:00.000Z",
        'inPersonTask':true,
        'isCurrentUserOwner':false,
        'moving':true,
        'profileImageURL':"modules/users/client/img/profile/default.png",
        'statusAssigned':false,
        'statusClosed':false,
        'statusOpen':true,
        'taskLocation':"eerywhere",
        'title':'example 3'
        },
        {
        'created': "2016-07-02T21:01:56.095Z",
        'description':"hang it",
        'dueDate':"2016-07-02T22:00:00.000Z",
        'inPersonTask':true,
        'isCurrentUserOwner':false,
        'DIY':true,
        'profileImageURL':"modules/users/client/img/profile/default.png",
        'statusAssigned':false,
        'statusClosed':false,
        'statusOpen':true,
        'taskLocation':"the world",
        'title':'example 2'
        },
        {
        'created': "2016-07-02T21:01:56.095Z",
        'description':"hang it",
        'dueDate':"2016-07-02T22:00:00.000Z",
        'inPersonTask':true,
        'isCurrentUserOwner':false,
        'marketing':true,
        'profileImageURL':"modules/users/client/img/profile/default.png",
        'statusAssigned':false,
        'statusClosed':false,
        'statusOpen':true,
        'taskLocation':"the world",
        'title':'example 3'
        }
  ];
  $scope.taskCategories = [
        {'cat': 'Moving & Delivery', 'filter': 'moving: true'},
        {'cat': 'DIY', 'filter': 'DIY: true'},
        {'cat': 'Marketing', 'filter': 'marketing: true' }
    ];
})

  .filter('customFilter', function() {
    return function(items, search) {
      if (!search) {
        return items;
      }    

      return items.filter(function(element) {
       // Ex: moving: true, becomes just 'moving'
       return Object.getOwnPropertyNames(element).find(x => x == search.substring(0, search.indexOf(':')));
      });
    };
  });
})(window.angular);

.example-animate-container {
  background:white;
  border:1px solid black;
  list-style:none;
  margin:0;
  padding:0 10px;
}

.animate-repeat {
  line-height:30px;
  list-style:none;
  box-sizing:border-box;
}

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
  transition:all linear 0.5s;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
  opacity:0;
  max-height:0;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
  opacity:1;
  max-height:30px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <link href="animations.css" rel="stylesheet" type="text/css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script>
</head>

<body ng-app="ngRepeat">
  <div ng-controller="repeatController">
    <!-- list of tasks /-->
    <h3>List of tasks, without filter</h3>
    <ul class="example-animate-container">
      <li class="animate-repeat" ng-repeat="task in tasks">[{{$index + 1}}] {{ task.title }}, {{ task.taskLocation }}</li>
    </ul>
    <!-- list of tasks with filter /-->
    <h3>List of tasks with filter -- results are not showing</h3>
    <p>{{ selectedCat }}</p>
    <select ng-model="selectedCat" ng-options="x.cat for x in taskCategories" ng-value="x.filter">
    </select>
    <ul>
      <li class="animate-repeat" ng-repeat="task in tasks | customFilter: selectedCat.filter">
        [{{$index + 1}}] {{ task.title }}, {{ task.taskLocation }}</li>
    </ul>
  </div>
</body>

</html>

angular ng-options选择过滤ng-repeat

1 个答案: