angular ng-options选择过滤器ng-repeat

Question

I am rewriting an angular select option, previously I was using a bootstrap btn-group class with numerous li classes, which used ng-click to set a filter in my ng-repeat list which worked perfectly. 我正在重写角度选择选项，之前我使用的是带有多个li类的bootstrap btn-group类，该类使用ng-click在ng-repeat列表中设置了一个过滤器，效果很好。 Like so: 像这样：

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

However, after some feedback, I have been asked to change it to a <select> with <option> set up, so to reflect the selected option. 但是，经过一些反馈，我被要求将其更改为设置了<option>的<select> ，以反映所选的选项。

I have added a list to my controller scope, like so: 我已经向控制器范围添加了一个列表，如下所示：

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

Here is the select 这是选择

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

Here is my ng-repeat 这是我的重复

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

To give a bit of relevance, my ng-click filters work like so: 有点相关，我的ng-click过滤器的工作方式如下：

ng-click="myFilter = { moving: true }"

However, when I click on one of my select values, which are ng-repeating through the $scope.taskCategories just fine, my ng-repeat returns 0 results, which is not correct. 但是，当我单击一个选择值（通过$ scope.taskCategories进行ng重复）时，我的ng-repeat返回0结果，这是不正确的。

If anyone could give me any pointers on where I am going wrong, I would greatly appreciate it. 如果有人可以向我指出我要去哪里哪里，我将不胜感激。 Thanks in advance! 提前致谢！ :) :)

Answer 1

You can create a custom filter and search by the property inside the object, as the following: 您可以创建一个自定义过滤器并按对象内部的属性进行搜索，如下所示：

 (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 个解决方案

解决方案1
2 已采纳 2016-07-07 17:35:22

angular ng-options选择过滤器ng-repeat

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-07-07 17:35:22

解决方案1
2 已采纳 2016-07-07 17:35:22