Preserve the array's status following a personalized filter in AngularJS

Question

Preserve the array's status following a personalized filter in AngularJS

I am currently working with two arrays of data displayed in a tree structure and have established a relationship between them.

$scope.types=['odd','prime','square','even'];
$scope.items=['1','4','3','8'];

div ng-repeat="item in items| customFilter">item

Additionally,

div ng-repeat="type in types| customFilter">type

Both arrays are shown using ng-repeat, where selecting an item from one array affects the display of the other. For example, if '1' is selected, the state would change to:

$scope.type=['odd','prime','square','even']; $scope.items=['1','4','3','8'];

The elements from the items array related to the type are then moved to the top.

Similarly, if 'even' is selected, the state would be:

$scope.type=['square','even','odd','prime']; $scope.items=['4','8','1','3'];

The bolded elements are highlighted on the page. I have implemented a custom filter in the ng-repeat to display and sort based on the relationship.

My challenge is that after sorting, the same state is not stored in the original arrays. Consequently, when I select an element from $scope.items, $scope.types reverts to its original state, causing the list on the page to readjust abruptly.

angularjs filter angularjs-filter

Answer 1

Answer №1

To keep track of changes in collections, you can use ng-change or $watch and utilize the $filter service in the controller to retrieve filtered values and save them to the same array.

For a demonstration, check out this sample: http://plnkr.co/edit/eW48QL2j30ZAKnwGzs3g?p=preview

<body ng-controller="MainCtrl">
    <select ng-model='opt1' ng-options='option for option in options1' ng-change='filter(options2, opt1)'></select>
    <select ng-model='opt2' ng-options='option for option in options2 | filter:opt1'></select>
    <button ng-click='clear()'>Clear</button>
  </body>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $filter) {
  $scope.options1 = ['A','C','J'];
  $scope.options2 = ['Andrew','Chris Martin', 'Jeeva'];
  $scope.filter = function(collection, value){
    $scope.newoptions2 = $filter('filter')(collection, value);
    console.log($scope.newoptions2);
    $scope.options2 = $scope.newoptions2;
    $scope.options1 = [value];
  };
  $scope.clear = function(){
    $scope.options1 = ['A','C','J'];
    $scope.options2 = ['Andrew','Chris Martin', 'Jeeva'];
  }
});

Swap out 'filter' with your own 'customFilter'. Feel free to reach out if you need further assistance.

Answer 2

To keep track of changes in collections, you can use ng-change or $watch and utilize the $filter service in the controller to retrieve filtered values and save them to the same array.

For a demonstration, check out this sample: http://plnkr.co/edit/eW48QL2j30ZAKnwGzs3g?p=preview

<body ng-controller="MainCtrl">
    <select ng-model='opt1' ng-options='option for option in options1' ng-change='filter(options2, opt1)'></select>
    <select ng-model='opt2' ng-options='option for option in options2 | filter:opt1'></select>
    <button ng-click='clear()'>Clear</button>
  </body>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $filter) {
  $scope.options1 = ['A','C','J'];
  $scope.options2 = ['Andrew','Chris Martin', 'Jeeva'];
  $scope.filter = function(collection, value){
    $scope.newoptions2 = $filter('filter')(collection, value);
    console.log($scope.newoptions2);
    $scope.options2 = $scope.newoptions2;
    $scope.options1 = [value];
  };
  $scope.clear = function(){
    $scope.options1 = ['A','C','J'];
    $scope.options2 = ['Andrew','Chris Martin', 'Jeeva'];
  }
});

Swap out 'filter' with your own 'customFilter'. Feel free to reach out if you need further assistance.

Preserve the array's status following a personalized filter in AngularJS

Answer №1

Similar questions

Creating a nested set of directives by iterating over an array within an AngularJS directive

When attempting to execute a Spring Boot CLI using the command "spring run app.groovy", an error is displayed stating "bash: spring: command not found"

Error message encountered in MEAN application request

Tips on storing chosen language in local storage or cookies using AngularJS

ensure that html tags display properly when retrieved from json in an angular directive template

Issue with AngularJS: Dynamically generated tab does not become active or selected

Sending a date to WebAPI from an HTML5 input field with type "date" using Angular - Tips and Tricks

What is the method to assign multiple values to ng-disabled in AngularJS?

Only allow numbers to be entered into input fields using AngularJS

Implementing file uploads in an Ionic application with a Web API

Understanding how to interpret language settings in AngularJS MVC 4

Can I keep using ng-repeat multiple times in my code?

Filtering a Two-Dimensional Array Using JavaScript

Switching minimum and maximum input values based on a specific condition: A step-by-step guide

Best Method for Updating a Single Scope and Setting the Others to False in AngularJS

Angular organizes the GET response in alphabetic order

Creating a feature in Angular JS that allows for each item in a list to be toggled individually

Single-line form with labels positioned above the input fields

Tips for modifying the value and refreshing the array

Is there a way to set table column headers in ngGrid using values from another array?