上使用NG重复一个对象作为过滤器 [英] Using a object on NG-repeat as a filter
问题描述
我这是从类别的JSON文件生成多个选择下拉菜单。
I have a multiple select dropdowns which are generated from a JSON file of categories.
我想使用的选择使用户在选择过滤那些与NG重复生成的应用程序列表。
I want to use the choice the users make in the selection to filter a list of apps that are generated with an ng-repeat.
我有这个plunker http://plnkr.co/edit/ipfVfH3pbLoYk1u4n3la?p = preVIEW 这显示生成的下拉菜单，但用户选择进入一个对象，并从什么，我告诉你，不能以此为NG-repeat的过滤器。
I have this plunker http://plnkr.co/edit/ipfVfH3pbLoYk1u4n3la?p=preview which shows the dropdowns generated but the users choice goes into an object and from what i am told you can not use this as a filter for ng-repeat's.
是否有可能使用这个以滤除或可以转换呢？
Is it possible to use this to filter by or can i convert this?
这是从我的早期的岗位 - <一个href=\"http://stackoverflow.com/questions/19835897/dynamically-create-multiple-dropdowns-angularjs-from-a-single-json-file\">Dynamically创建多个下拉菜单从单一的JSON文件 angularjs
This is from an earlier post of mine - Dynamically create multiple dropdowns angularjs from a single JSON file
下面是另一个版本的呈现每个单独选择。它使用自定义GROUPBY滤波器（使用下划线）：
Here's an alternate version rendering each select individually. It's using a custom groupBy filter (using underscore):
app.filter('groupBy', ['$parse', function ($parse) {
return function groupByFilter(input, groupByExpr) {
return _.groupBy(input, $parse(groupByExpr));
};
}]);
与
<div ng-repeat="(categoryTypeName, categories) in groupedCategories track by categoryTypeName">
<label>{{categoryTypeName}}</label>
<select
ng-model="selected[categoryTypeName]"
ng-options="c as c.name for c in categories track by c.id"
multiple
></select>
</div>
不幸的是，过滤器已被应用时，数据的变化，
Unfortunately the filter has to be applied when the the data changes,
$scope.$watchCollection('categories', function (categories) {
$scope.groupedCategories = groupByFilter(categories, 'categoryType.name');
});
，因为如果用NG-重复使用直接的角度会抱怨无限$消化循环。
because if used with ng-repeat directly angular will complain about an Infinite $digest Loop.
那么，是否可以使用输出（用户选择）作为重复的过滤器？
So is it possible to use the output (users choices) as a filter on the repeat?
我需要用的是选择，所以如果应用程序没有与他们选择那么它不会显示在类别标记，以过滤应用程序的类别名称。每个应用程序都有补充，是在下拉菜单中提供的任何标签的能力。
What i need to use is the name of the category that is chosen to filter the apps so if the app is not tagged with the category they chose then it wont show up. Each app has the ability to add any tags that are available in the dropdowns.
---添加的信息---
--- ADDED INFORMATION ---
显示应用的列表将在同一控制器作为过滤器从上方并在plunker进行处理，他们将在同一视图，看到的图像，以什么我现在有。模糊的东西出来进行保护。
The list of apps displayed will be handled in the same controller as the filters from above and in the plunker and they will be in the same view, see the image as to what i currently have. Blurred things out for protection.
http://i.imgur.com/1SxjxFC.jpg - 道歉这不是让我得到一个更高质量的屏幕截图。
http://i.imgur.com/1SxjxFC.jpg - apologies it's not letting me getting a higher quality screenshot.
NG的重复我目前拥有的应用程序是;
The ng repeat i currently have for the apps is;
<div class="col-md-4"
ng-repeat="app in objects | filter:query |orderBy:'-createdAt'">
通过查询只是作为一个简单的搜索输入框。
With query just being a simple search input box.
要生成该用户可以进行多项选择的下拉菜单使用此重复;
To generate the dropdowns from which the the user can make multiple choices is using this repeat;
<div ng-repeat="(categoryTypeName, categories) in groupedCategories track by categoryTypeName">
<label>{{categoryTypeName}}</label>
<br>
<select class="form-control" multiple class="span4 chzn-select" chosen data-placeholder=" "
ng-options="c as c.name for c in categories track by c.id"
ng-model="selected[categoryTypeName]"
></select>
选的是只是用来进行多个选择好看的插件。
Chosen is just a plugin used to make multiple selection look nice.
这显示他们可以点击它会给他们有关它的更多详细信息，每个应用程序。每个应用程序都有可以有1个或多个标签所有这一切都可以在其中产生的下拉菜单进行过滤。
Each app that is displayed they can click on and it will give them more details about it. Each app has can have 1 or multiple tags all of which are available to filter by in the dropdown menus which are generated.
正如你可以看到从图像发布，用户可以通过任何他们想要的categoryTypes中选择多个类别筛选下来。我真的不能由作为利益相关者希望每一个过滤器下拉菜单被分开使用的组，然后让用户选择多个类别，从1或多个categoryTypes通过过滤
As you can see from the image posted the user can filter down by selecting multiple categories from any of the categoryTypes they want. I cant really use the group by as the stakeholders want every filter dropdown to be seperated and then allow the user to choice multiple categories to filter by from 1 or multiple categoryTypes.
控制器我要生成的应用程序看起来像这样;
The controller i have to generate the apps looks like this;
$scope.objects = [];
$scope.getData = function (cb) {
return appFactory.query(function (data) {
$scope.objects = data;
if (cb) cb();
}, function(data) {
alert("ERROR getting all applications");
});
};
$scope.getData();
var successCallback = function (e, cb) {
alertService.add("success", "Success!");
$scope.getData(cb);
};
CB - 仅有succesfull回调这是在控制器
cb - is just a succesfull callback which is in the controller
随着工厂的存在;
.factory('appFactory', function ($resource) {
return $resource(
'resources/appstore/applications/:id',
{ id:'@id' },
{ 'update': { method: 'PUT'} }
);
})
我希望发生的是用户选择的过滤器就像angularjs文本搜索演示它会做出一个选择，每次筛选出的应用程序，当用户点击x和从过滤器列表中删除一个类别它将删除已显示，因为所选择的任何应用程序。如果是有道理的？
What i want to happen is as the user choices filters just like the angularjs text search demo it will filter out the apps each time a selection is made and when the user clicks the x and removes a category from the filter list it will remove any apps that were shown because of that choice. If that makes sense?
我觉得这是我需要给，如果他们的仍是更多的我已经离开了，请让我知道。所有的信息
I think that is all the information i would need to give, if their is still more i have left out please let me know.
推荐答案
我想你会再需要为这个自定义过滤器。尝试例如（再次使用下划线 的）：
I think you'll again need a custom filter for this. Try for example (again using underscore):
app.filter('bySelectedCategories', [function () {
return function bySelectedCategoriesFilter(input, selection) {
var categoryNames = _.flatten(_.map(selection, function (categories) {
return _.pluck(categories, 'name');
}));
return _.filter(input, function (app) {
return _.difference(categoryNames, app.categoryNames).length === 0;
});
};
}]);
这的工作原理是：
- 获得选中
CATEGORYNAMES和 - 通过计算差与所选类别过滤应用
演示： http://plnkr.co/edit/wAyfBgjLBSS0KcN008ru?p=preVIEW
这篇关于上使用NG重复一个对象作为过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http://i.imgur.com/1SxjxFC.jpg](\"http://i.imgur.com/1SxjxFC.jpg\"){kind=link}