Refresh the array object following a personalized filter

Question

Refresh the array object following a personalized filter

I am currently using a custom filter to aggregate a $scope object within an ng-repeat block. Here is my code snippet:

  $scope.myobj = isSelected ? $filter('customFilter')($scope.origObj) : $scope.origObj

In the above code, $scope.myobj is utilized in the ng-repeat. If the isSelected flag is true, the original object is filtered and returned into $scope.myobj; otherwise, the original object is returned as is. However, I have noticed that any changes made to objects within the filtered array do not reflect in the original array, which makes sense since they are different objects.

Is there a way to ensure that these changes are reflected in the original array when the filter is not active? Currently, my workaround involves refreshing the view after an update (server request), but I am searching for a more efficient method that would only update the specific row being edited without requiring a full refresh.

javascript angularjs angularjs-directive angularjs-scope

Answer 1

Answer №1

A more efficient approach would be to create a personalized filter that can take a parameter and utilize it within the ng-repeat loop.

.filter('myFilter', function(){
return function(inputArr, isSelected){
    var outputArr = [];
    if(isSelected){
        outputArr = inputArr.filter(function(obj){return obj.active === true});
    }
    else{
        outputArr = inputArr;
    }
    return outputArr;
}
})

Check out this JSFiddle link for a working example. I hope this solution proves helpful!

Answer 2

A more efficient approach would be to create a personalized filter that can take a parameter and utilize it within the ng-repeat loop.

.filter('myFilter', function(){
return function(inputArr, isSelected){
    var outputArr = [];
    if(isSelected){
        outputArr = inputArr.filter(function(obj){return obj.active === true});
    }
    else{
        outputArr = inputArr;
    }
    return outputArr;
}
})

Check out this JSFiddle link for a working example. I hope this solution proves helpful!

Refresh the array object following a personalized filter

Answer №1

Similar questions

The concept of overloading operators in V8

What is the method to remove the overlay from view?

Restricting JSON output using date and time values within the JSON object

The new data is not being fetched before *ngFor is updating

Exploring JSON data in JavaScript

Struggling to Manage and Preserve Cookies in Browser While Using React App Hosted on GitHub Pages and Node.js Backend Running on Render

Modify the td attributes while retaining the extracted data values from the website

Loading the children of a specified div ID using AJAX

Exporting tables and c3 charts from AngularJS to a spreadsheet

ag-grid allows for selecting multiple rows without the need to press the Control Key

javascript with a focus on objects

Guide to deploying a Node.js application with a Gruntfile on Heroku

`Uniform background color across all pages`

AngularJs throw an error when trying to use $q which is not defined on the console

What is the best way to create a menu in JavaScript that includes a variable declaration?

Creating a Dynamic Input Validation Range with JQuery

What is the best way to showcase navigation and footer on every page using AngularJS?

Having trouble with clearInterval in my Angular code

Using Selectpicker with Jquery .on('change') results in the change event being triggered twice in a row

How to remove outer quotes from JSON data in Reactjs after using JSON.stringify