Javascript 使用下拉菜单筛选ng repeat,而不复制下拉菜单选项
同样,我可以手动执行Javascript 使用下拉菜单筛选ng repeat,而不复制下拉菜单选项,javascript,html,angularjs,drop-down-menu,Javascript,Html,Angularjs,Drop Down Menu,同样,我可以手动执行筛选:{category:'Popular'}在ng repeat中,我希望能够使用下拉列表执行相同的操作 我能够使基本的工作。我有两个问题:我不希望类别在下拉列表中重复自己,我希望在下拉列表中选择“流行”时能够看到所有分类为“流行”的内容 这是我的HTML: <div ng-controller="SuperCtrl" class="row"> <ul class="small-12 medium-12 columns"> <sel
筛选:{category:'Popular'}
在ng repeat
中,我希望能够使用下拉列表执行相同的操作
我能够使基本的工作。我有两个问题:我不希望类别在下拉列表中重复自己,我希望在下拉列表中选择“流行”时能够看到所有分类为“流行”的内容
这是我的HTML:
<div ng-controller="SuperCtrl" class="row">
<ul class="small-12 medium-12 columns">
<select ng-model="find" ng-options="entry.category for entry in parsedEntries"><option value="">Select Category</option></select>.
<li ng-repeat="entry in parsedEntries | filter: find">
<strong>{{ entry.title }} </strong><br>
{{ entry.description }}
</li>
</ul></div>
让它按照您想要的方式工作:
<select ng-model="find" ng-options="entry.category as entry.category for entry in parsedEntries | unique: 'category'">
见
注意:这本身不是问题,但我从
元素中取出了
元素。只需将唯一的类别放入名为类别的字符串数组中,对数组排序,并使用ng选项显示它即可:
<select ng-model="find" ng-options="category as category for category in categories"><option value="">Select Category</option></select>.
在选择标记内的option和li元素上都使用ng repeat。我想你可以去掉li标签,这样它就不会被复制了(?)太棒了!!非常感谢。请允许我再问一件事:将下拉列表默认设置为第一类项目的最佳方式是什么?您可以为控制器中的变量find
添加默认值。例如$scope.find='popular'代码>。但是我必须在唯一过滤器之后的ng options属性值中添加track by entry.category
,以便默认值显示为选中。
var app = angular.module('myApp', ['angular.filter']);
<select ng-model="find" ng-options="category as category for category in categories"><option value="">Select Category</option></select>.
function contains(a, obj) {
for (var i = 0; i < a.length; i++) {
if (a[i] === obj) {
return true;
}
}
return false;
};
$http.get(url)
.success(function(response) {
var entries = response['feed']['entry'];
$scope.parsedEntries = [];
$scope.categories = [];
for (key in entries) {
var content = entries[key];
var obj = parse(content);
$scope.parsedEntries.push(obj);
if (!contains($scope.categories, obj.category))
{
$scope.categories.push(obj.category);
}
}
$scope.categories.sort();
})