角:如何将模板ng模型转换为过滤指令。
角:如何将模板ng模型转换为过滤指令。
提问于 2015-09-29 20:34:42
我正在尝试创建一个指令，它显示下面的模板，并最终允许简单的过滤。当选择列表中的一个选项被选中，并将一个值输入到输入框中时，模型将发生变化。我需要指令来包含这个模型，然后使用这个模型进行过滤。
到目前为止，这是我所能做到的。有人能在这方面给我一些指导吗，因为我确信我的示例中也有多余的代码。
<div ng-controller="resultsCtrl">
<div ng-controller="searchFilterCtrl">
<dynamic-filters dynamic-filters-directive-search="getSearchFilters"></dynamic-filters>
</div>
<div ng-repeat="person in persons | filter: search">
{{person.name}}
</div>
模板：
<select ng-model="filterType">
<option value="age">Age</option>
<option value="customerId">CustomerID</option>
<option value="productId">ProductID</option>
</select>
<input type="text" name="select-option-value" ng-model="search[filterType]">
<p>You want to filter the field : {{filterType}}</p>回答 1
Stack Overflow用户
回答已采纳
发布于 2015-09-29 21:28:48
我想你很亲近，但实际上简单多了。试试这
索引HTML：
<div ng-controller="resultsCtrl">
<dynamic-filters search="search"></dynamic-filters>
<div ng-repeat="person in persons | filter: search">
{{person.name}}
</div>
</div>指令HTML：
<select ng-model="filterType">
<option value="age">Age</option>
<option value="customerId">CustomerID</option>
<option value="productId">ProductID</option>
<option value="name">Name</option>
</select>
<input type="text" name="select-option-value" ng-model="search[filterType]">
<p>You want to filter the field : {{filterType}}</p>script.js JS代码：
angular.module('app', ['dynamicFiltersDirective']).controller('resultsCtrl', function($scope){
$scope.persons = [{
name: 'Jim',
age: 18,
customerId: 1,
productId: 4
},{
name: 'Frank',
age: 20,
customerId: 2,
productId: 5
},{
name: 'Bob',
age: 20,
customerId: 3,
productId: 5
}];
});指令JS代码：
angular.module('dynamicFiltersDirective', [])
.directive('dynamicFilters', function() {
return {
restrict: 'AE',
scope: {
search: '='
},
link: function(scope) {
scope.$watch('filterType', function(v) {
if(!v) {return;}
//clear out the search
scope.search = {};
scope.search[v] = '';
});
},
templateUrl: 'filtertemplate.html'
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32853299
复制相关文章
相似问题
腾讯云开发者
