AngularJS:通过ng-repeat进行动态过滤 [英] AngularJS: Dynamic filtering through ng-repeat
本文介绍了AngularJS:通过ng-repeat进行动态过滤的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用下拉列表进行过滤并在 ng-repeat
中动态更改值,不确定如何执行操作,是否有任何提示?
I'm trying to filter using dropdown and change value dynamically in ng-repeat
, not sure how to do it, any hints?
下拉菜单:
<label>Status</label>
<select class="form-control" ng-model="currentlySelected">
<option value="">All</option>
<option value="inactive">Inactive</option>
<option value="active">Active</option>
</select>
过滤条件:
filter disable for All results
filter: {deleted_at : ''} --> Inactive results
filter: {deleted_at : null} --> Active results
查看:
<tr ng-repeat="user in users">
推荐答案
您需要类似的内容,
<li ng-repeat="user in users | filter : {status: currentlySelected}: true">
演示
angular.module('app', [])
.controller('Main', ['$scope', function($scope) {
$scope.title = "Filter Based on Select Value";
$scope.users = [
{"id":18,"deleted_at" : ''},
{"id":19,"deleted_at":'null'},
{"id":21,"deleted_at":''},
{"id":22,"deleted_at":''},
]
}]);
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="Main">
<h1>{{title}}</h1>
<label>Status</label>
<select class="form-control" ng-model="currentlySelected">
<option value="">All</option>
<option value="null">Inactive</option>
<option value="">Active</option>
</select>
<li ng-repeat="user in users | filter : {deleted_at: currentlySelected}: true">
<h3>{{user.id}}</h3>
</li>
</body>
</html>
这篇关于AngularJS:通过ng-repeat进行动态过滤的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文