AngularJS:通过ng-repeat进行动态过滤 [英] AngularJS: Dynamic filtering through ng-repeat

查看:42
本文介绍了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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆