无法使用 AngularJS 进行动态过滤答案

【问题标题】：Unable to dynamically filter with AngularJS无法使用 AngularJS 进行动态过滤
【发布时间】：2020-07-12 16:33:43
【问题描述】：

我正在尝试在我的 html 中动态过滤。当我搜索 CMS 时，我需要将左侧面板上的数字更新为“1”以表示“绩效”和“投资”。我还需要在右侧面板上显示小程序。

（使用我当前的代码，我只能在选择类别时显示小程序，并且不会更新左侧面板上的数字） Image

谁能帮助我更好地了解我在这里缺少什么？任何帮助将不胜感激！

我的数据：

$scope.categories = [
    {
       'name': 'Performance',
       'applets': ['CMS', 'Performance Snapshot']
    },
    {
        'name' : 'Investments',
        'applets' : ['Commitment Widget', 'CMS']
    },
    {
        'name' : 'Operations',
        'applets' : []
    }
]

控制器：

$scope.categories = categories;

$scope.chooseCategory = function(category) {
    $scope.selectedCategoryApplets = category.applets;
}

html:

<div id="app">
  <h1>Library</h1>
  <div ng-controller="MainCtrl" class="container">
    <div class="row">
      <div class="col-sm-4">
        <h4>Categories</h4>
        <input type="text" value="searchText" ng-model="searchText" placeholder="Search Applets" />
        <div ng-repeat="category in categories | filter: searchText" ng-click="chooseCategory(category)">
          <div>{{category.name}}<span>{{category.applets.length}}</span></div>
        </div>
      </div>
    </div>

    <div class="col-sm-8">
      <h3>Applets</h3>
      <div ng-repeat="value in selectedCategoryApplets | filter: searchText">
        {{value}}
      </div>
    </div>
  </div>
</div>

【问题讨论】：

你需要新建一个变量来保存长度

标签： javascript angularjs

【解决方案1】：

您应该有一个不同的变量来显示过滤结果。

JS：

$scope.filteredCategories = $scope.categories;

$scope.filterBySearchText = function(searchText) {
  if (searchText === undefined || searchText.trim() === "") {
    $scope.filteredCategories = $scope.categories;
    return;
  }
  $scope.filteredCategories = angular.copy($scope.categories).map(cat => {
    cat.applets = cat.applets.filter(
      app => app.indexOf(searchText) !== -1
    );
    return cat;
  });
};

HTML：

<div class="row">
  <div class="col-sm-4">
    <h4>Categories</h4>
    <input type="text" value="searchText" ng-model="searchText" placeholder="Search Applets" ng-change="filterBySearchText(searchText)"/>
    <div ng-repeat="category in filteredCategories" ng-click="chooseCategory(category)">
      <div>{{category.name}}<span>{{category.applets.length}}</span></div>
    </div>
  </div>
</div>

<div class="col-sm-8">
  <h3>Applets</h3>
  <div ng-repeat="value in selectedCategoryApplets | filter: searchText">
    {{value}}
  </div>
</div>

https://stackblitz.com/edit/angularjs-nxwvce

【讨论】：

【解决方案2】：

控制器：

        $scope.filter = function() {
            $timeout(function() { 
                $scope.filteredItems = $scope.filtered.length;
            }, 10);
        };

    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };

HTML：

用于过滤器的输入元素

<div>
    Filter 
    <i class="fa fa-filter" aria-hidden="true"></i>
</div>
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />

<div> 数据被过滤的地方

<div ng-repeat="item in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">

......
</div>

希望这行得通！

【讨论】：