我有一个指令,我将其用作选择框。我想有一个搜索字段来过滤选择框项目。我在使用ngRepeat过滤器过滤项目时遇到问题。
以下是指令模板:
<a class="{{classes}}" href="javascript:;">{{placeholder}} <i class="uk-icon-angle-down"></i></a>
<div class="uk-dropdown uk-dropdown-medium">
<ul class="uk-nav uk-nav-dropdown">
<li ng-if="search" class="dropdown-input-wrap"><input type="text" placeholder="Search" ng-model="query" class="dropdown-input"></li>
<li ng-if="header && header.length" class="uk-nav-header">{{header}}</li>
<li ng-repeat="i in items | filter:query"><a ng-class="{'selected': selected == i[property]}" ng-click="setVal(i)" href="javascript:;"><i class="uk-icon uk-icon-user"></i>{{i.label}}</a></li>
</ul>
</div>
指令JS
app.directive('lySelect', function($filter) {
return {
retrict: 'A',
templateUrl: 'partials/elements.select.html',
scope: {
items: '=',
header: '@',
index: '@',
lyModel: '=?',
placeholder: '@'
},
controller: ['$scope', function($scope){
$scope.setVal = function(item){
$scope.lyModel = item[$scope.property];
$scope.placeholder = item[$scope.label];
$scope.selected = item[$scope.property];
$scope.$emit('selectChange', {handle: $scope.handle, value: item[$scope.property]});
};
}],
link: function (scope, elem, attrs){
scope.query = '';
scope.handle = attrs.handle;
scope.search = attrs.search || false;
scope.classes = attrs.classes;
scope.property = attrs.property || 'value';
scope.label = attrs.label || 'label';
scope.selected = attrs.selected || "";
var ph = $filter('filter')(scope.items, {value: attrs.selected})[0];
scope.placeholder = ph[scope.label];
}
}
});
我这样称呼我的指示:
<li class="uk-parent" search="true" ly-select ly-model="category" header="Categories" selected="{{category}}" items="categories" handle="categoryChange" data-uk-dropdown="{mode: 'click'}"></li>
基本上,如果我将$scope.query
设置为链接器中的某个内容,它会显示已过滤的列表,但在此之后,过滤器不起作用,实际上我认为它是,但视图不会更新。怎么会 ?我应该在指令内手动更新视图吗?
由于