AngularJS 按内联表达式过滤
AngularJS Filter by Inline Expression
我正在尝试添加一个内联 Angular 过滤器,该过滤器通过计算结果为 true 或 false 的表达式进行过滤。这是我的 JS:
angular.module('programApp', [
'programApp.controllers',
]);
angular.module('programApp.controllers', [])
.controller('programController', ['$scope', '$filter',
function($scope, $filter){
$scope.advancedFilters = 1;
$scope.bars = [
{'name':'First',
'id':1},
{'name':'Second',
'id':2},
{'name':'Third',
'id':3},
{'name':'Fourth',
'id':4},
{'name':'Fifth',
'id':5}];
}]);
这是我的 HTML:
<div ng-app="programApp" ng-controller="programController">
<label>Level:
<select ng-model="advancedFilters">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</label>
<div ng-repeat="bar in bars | filter:advancedFilters <= bar.id">
<h3>{{bar.name}}</h3>
</div>
</div>
您可以看到我是如何尝试根据 advancedFilters 下拉列表中的内容过滤栏 ng-repeat 的。但是,当我尝试向 ng-repeat 添加一个计算结果为 true 或 false 的过滤器时,我得到了一个 angular 错误。
我想避免在这种情况下创建自定义函数。如果可能,过滤器应在 HTML.
中保持内联
这看起来很简单,但行不通。我在这里做错了什么?
如果你真的想避免使用控制器,你可以使用 ngInit
指令来创建 comparator 表达式,它将在每次迭代时重新初始化。像这样:
<div ng-init="test = bar.id >= advancedFilters"
ng-repeat="bar in bars | filter:{id:advancedFilters}:test">
<h3>{{bar.name}}</h3>
</div>
我正在尝试添加一个内联 Angular 过滤器,该过滤器通过计算结果为 true 或 false 的表达式进行过滤。这是我的 JS:
angular.module('programApp', [
'programApp.controllers',
]);
angular.module('programApp.controllers', [])
.controller('programController', ['$scope', '$filter',
function($scope, $filter){
$scope.advancedFilters = 1;
$scope.bars = [
{'name':'First',
'id':1},
{'name':'Second',
'id':2},
{'name':'Third',
'id':3},
{'name':'Fourth',
'id':4},
{'name':'Fifth',
'id':5}];
}]);
这是我的 HTML:
<div ng-app="programApp" ng-controller="programController">
<label>Level:
<select ng-model="advancedFilters">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</label>
<div ng-repeat="bar in bars | filter:advancedFilters <= bar.id">
<h3>{{bar.name}}</h3>
</div>
</div>
您可以看到我是如何尝试根据 advancedFilters 下拉列表中的内容过滤栏 ng-repeat 的。但是,当我尝试向 ng-repeat 添加一个计算结果为 true 或 false 的过滤器时,我得到了一个 angular 错误。
我想避免在这种情况下创建自定义函数。如果可能,过滤器应在 HTML.
中保持内联这看起来很简单,但行不通。我在这里做错了什么?
如果你真的想避免使用控制器,你可以使用 ngInit
指令来创建 comparator 表达式,它将在每次迭代时重新初始化。像这样:
<div ng-init="test = bar.id >= advancedFilters"
ng-repeat="bar in bars | filter:{id:advancedFilters}:test">
<h3>{{bar.name}}</h3>
</div>