Unable to dynamically filter with AngularJS

user_9954816 0
Viewed 47

I am trying to dynamically filter in my html. When I search for CMS, I need the number on the left panel to update to '1' for both Performance and Investments. I also need the applet to display on the right panel.

(With my current code I am able to display the applets only when I have a category selected, and does not update the number on the left panel) Image

Can anyone help me better understand what I am missing here? Any help would be much appreciated!

My data:

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

controller:

$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>
angularjs javascript
2 Answers

You should have a different variable for displaying the filtered result.

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

user_39436320

Controller:

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

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

HTML:

Input element used for filter

<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> where data is getting filtered

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

......
</div>

Hope this works!!

user_41981800
Related