ng重复计数-筛选器更新次数不超过一次

ng-repeat count - filter not updating more than once

本文关键字：不超过 一次 更新 筛选 ng      更新时间：2023-09-26

我有一个列表，上面附加了一些过滤器。我想统计一下项目，如果有0个项目，就会显示一条消息。。。

<li ng-repeat="item in items = (items | sortWithTab:tab | filter:search")>
    {{ item.name }}
</li>
<div ng-if="items.length === 0">No items</div>

项目集包含一个带有名称的tab字段，我有相关的按钮可以按该名称进行筛选，从而更新$scope.tab名称。

如果我想输出该列表中的项目数，我会执行items.length，这很有效。但是，如果我尝试返回已按下的选项卡，它不会更新。有人知道为什么吗？

以下示例：

var app = angular.module('App', []);
app.controller('SampleCtrl', ['$scope',
      function($scope) {
        
        $scope.tab = 'all';
        
        $scope.changeTab = function(tab)
        {
           $scope.tab = tab;          
        }
        $scope.items = [
          {name: 'One', tab: 'live'},
          {name: 'Two', tab: 'today'},
          {name: 'Three', tab: 'today'},
          {name: 'Four', tab: 'today'},
          {name: 'Five', tab: 'live'},
          {name: 'Six', tab: 'today'},
          {name: 'Seven', tab: 'today'},
          {name: 'Eight', tab: 'live'}
        ];
      }]);
app.filter('sortWithTab', function() {
    
  return function(list, tab) {
    
    var filtered;
    var i;
    if (tab == 'all') {
      
      return list;
      
    } else if (tab == 'today') {
      
      filtered = [];
      for (i = 0; i < list.length; i++) {
        if(list[i].tab == 'today')
          filtered.push(list[i]);
      }
      return filtered;
      
    } else if (tab == 'live') {
      
      filtered = [];
      for (i = 0; i < list.length; i++) {
        if(list[i].tab == 'live')
          filtered.push(list[i]);
      }
      return filtered;
      
    } else {
      
      return list;
      
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="SampleCtrl">
  
  <a ng-click="changeTab('all')">All</a>
  <a ng-click="changeTab('today')">Today</a>
  <a ng-click="changeTab('live')">Live</a>
  
  <ul>
    <li ng-repeat="item in items = (items | sortWithTab:tab)">
      {{ item.name }}
    </li>
    Total: {{ items.length }}
  </ul>
</div>

更改

 <li ng-repeat="item in items = (items | sortWithTab:tab)">

至

<li ng-repeat="item in filtered = (items | sortWithTab:tab)">


var app = angular.module('App', []);
app.controller('SampleCtrl', ['$scope',
  function($scope) {
    $scope.tab = 'all';
    $scope.changeTab = function(tab) {
      $scope.tab = tab;
    }
    $scope.items = [{
      name: 'One',
      tab: 'live'
    }, {
      name: 'Two',
      tab: 'today'
    }, {
      name: 'Three',
      tab: 'today'
    }, {
      name: 'Four',
      tab: 'today'
    }, {
      name: 'Five',
      tab: 'live'
    }, {
      name: 'Six',
      tab: 'today'
    }, {
      name: 'Seven',
      tab: 'today'
    }, {
      name: 'Eight',
      tab: 'live'
    }];
  }
]);
app.filter('sortWithTab', function() {
  return function(list, tab) {
    var filtered;
    var i;
    if (tab == 'all') {
      return list;
    } else if (tab == 'today') {
      filtered = [];
      for (i = 0; i < list.length; i++) {
        if (list[i].tab == 'today')
          filtered.push(list[i]);
      }
      return filtered;
    } else if (tab == 'live') {
      filtered = [];
      for (i = 0; i < list.length; i++) {
        if (list[i].tab == 'live')
          filtered.push(list[i]);
      }
      return filtered;
    } else {
      return list;
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="SampleCtrl">
  <a ng-click="changeTab('all')">All</a> |
  <a ng-click="changeTab('today')">Today</a> |
  <a ng-click="changeTab('live')">Live</a> |
 
  <ul>
    <li ng-repeat="item in filtered = (items | sortWithTab:tab)">
      {{ item.name }}
    </li>
    
    <div ng-if="filtered.length === 0">No items</div>
    Total: {{ filtered.length }}
  </ul>
</div>

相关文章：