Styjun

Quote from Leibniz

Extracting sublists that contain similar elements

As programers say: Strive to be lazy

Can a tourist shoot a gun in the USA?

Do I need to say 'o`clock'?

Does SQL Server allow (make visible) DDL inside a transaction to the transaction prior to commit?

Anabelian geometry ~ higher category theory

LWC1513: @salesforce/resourceUrl modules only support default imports

If current results hold, Man City would win PL title

Why does my circuit work on a breadboard, but not on a perfboard? I am new to soldering

Why is LOX on top in the Space Shuttle external tank instead of the other the way round?

Ito`s Lemma problem

Could there be a material that inverts the colours seen through it?

Developers demotivated due to working on same project for more than 2 years

What to do if SUS scores contradict qualitative feedback?

Loading Latex packages into Mathematica

CPLD based Pierce oscillator

what does a native speaker say when he wanted to leave his work?

How does emacs `shell-mode` know to prompt for sudo?

Does Lawful Interception of 4G / the proposed 5G provide a back door for hackers as well?

How can dragons propel their breath attacks to a long distance

Rounding a number extracted by jq to limit the decimal points

Can I say: "When was your train leaving?" if the train leaves in the future?

Why is it harder to turn a motor/generator with shorted terminals?

angularjs : filter array with unsaved changes by name using an input tag

HTML form readonly SELECT tag/inputjQuery: Get selected element tag nameAngularJS with Django - Conflicting template tagsDelaying AngularJS route change until model loaded to prevent flickerHow to dynamically change header based on AngularJS partial view?How to deep watch an array in angularjs?AngularJs: How to check for changes in file input fields?Multiple filters on array of objectsCreate new array in which items with commas are separated into unique items in the arrayAllow for conditional .filter() and .map() in AngularJS on-change?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

3

I normally filter an array using input tag like this :

 $scope.filtername = function (vname) 

 //repopulate the array from a copy every time input changes

 $scope.items = $scope.items_filter;

 //filter array if vname is a substring from item.name

 if (vname && vname.trim() != '') 
 $scope.items = $scope.items.filter((item) => 
 return (item.name.toLowerCase().indexOf(vname.toLowerCase()) > -1);
 )
 
 ;

<input type="search" ng-model="namev" ng-change="filtername(namev)">

But since the user needs to filter the array while editing hundreds of items with unsaved changes, I'm not sure how to proceed. Should I use ng-show instead ? or is there a better vanilla javascript way?

javascript arrays angularjs

share|improve this question

edited Mar 23 at 13:37

georgeawg

36k115470

asked Mar 23 at 12:55

Amine Da.Amine Da.

7483917

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Filtering the items that only in $scope.items and unsaved items won't come to the current $scope.items or in two binding it updated?
  
  – Harshana
  Mar 23 at 13:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't want to discard the unsaved change to $scope.items while filtering. If you look at my code i was repopulating the array with the original untouched copy of the array (not useful in my case)
  
  – Amine Da.
  Mar 23 at 13:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  also regarding performance, I dont want to save the state of the array every time the input filter changes
  
  – Amine Da.
  Mar 23 at 13:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I think the best way is update your items list only once the unsaved items operation completed and always updating a large list of items with here $scope.items = $scope.items_filter; for a onchange event is not good.
  
  – Harshana
  Mar 23 at 13:24
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  filtering plays a huge part in the editing operation. there is no need to filter after the unsaved items operation completes. and about $scope.items = $scope.items_filter; do you have a better way to filter array using a search input?
  
  – Amine Da.
  Mar 23 at 13:28
  
  

  
  
  
  

 | 
show 1 more comment

1

3

I normally filter an array using input tag like this :

 $scope.filtername = function (vname) 

 //repopulate the array from a copy every time input changes

 $scope.items = $scope.items_filter;

 //filter array if vname is a substring from item.name

 if (vname && vname.trim() != '') 
 $scope.items = $scope.items.filter((item) => 
 return (item.name.toLowerCase().indexOf(vname.toLowerCase()) > -1);
 )
 
 ;

<input type="search" ng-model="namev" ng-change="filtername(namev)">

But since the user needs to filter the array while editing hundreds of items with unsaved changes, I'm not sure how to proceed. Should I use ng-show instead ? or is there a better vanilla javascript way?

javascript arrays angularjs

share|improve this question

edited Mar 23 at 13:37

georgeawg

36k115470

asked Mar 23 at 12:55

Amine Da.Amine Da.

7483917

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Filtering the items that only in $scope.items and unsaved items won't come to the current $scope.items or in two binding it updated?
  
  – Harshana
  Mar 23 at 13:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't want to discard the unsaved change to $scope.items while filtering. If you look at my code i was repopulating the array with the original untouched copy of the array (not useful in my case)
  
  – Amine Da.
  Mar 23 at 13:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  also regarding performance, I dont want to save the state of the array every time the input filter changes
  
  – Amine Da.
  Mar 23 at 13:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I think the best way is update your items list only once the unsaved items operation completed and always updating a large list of items with here $scope.items = $scope.items_filter; for a onchange event is not good.
  
  – Harshana
  Mar 23 at 13:24
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  filtering plays a huge part in the editing operation. there is no need to filter after the unsaved items operation completes. and about $scope.items = $scope.items_filter; do you have a better way to filter array using a search input?
  
  – Amine Da.
  Mar 23 at 13:28
  
  

  
  
  
  

 | 
show 1 more comment

I normally filter an array using input tag like this :

 $scope.filtername = function (vname) 

 //repopulate the array from a copy every time input changes

 $scope.items = $scope.items_filter;

 //filter array if vname is a substring from item.name

 if (vname && vname.trim() != '') 
 $scope.items = $scope.items.filter((item) => 
 return (item.name.toLowerCase().indexOf(vname.toLowerCase()) > -1);
 )
 
 ;

<input type="search" ng-model="namev" ng-change="filtername(namev)">

But since the user needs to filter the array while editing hundreds of items with unsaved changes, I'm not sure how to proceed. Should I use ng-show instead ? or is there a better vanilla javascript way?

javascript arrays angularjs

share|improve this question

edited Mar 23 at 13:37

georgeawg

36k115470

asked Mar 23 at 12:55

Amine Da.Amine Da.

7483917

 $scope.filtername = function (vname) 

 //repopulate the array from a copy every time input changes

 $scope.items = $scope.items_filter;

 //filter array if vname is a substring from item.name

 if (vname && vname.trim() != '') 
 $scope.items = $scope.items.filter((item) => 
 return (item.name.toLowerCase().indexOf(vname.toLowerCase()) > -1);
 )
 
 ;

<input type="search" ng-model="namev" ng-change="filtername(namev)">

share|improve this question

edited Mar 23 at 13:37

georgeawg

36k115470

asked Mar 23 at 12:55

Amine Da.Amine Da.

7483917

share|improve this question

edited Mar 23 at 13:37

georgeawg

36k115470

asked Mar 23 at 12:55

Amine Da.Amine Da.

7483917

edited Mar 23 at 13:37

georgeawg

36k115470

edited Mar 23 at 13:37

georgeawg

36k115470

asked Mar 23 at 12:55

Amine Da.Amine Da.

7483917

asked Mar 23 at 12:55

Amine Da.Amine Da.

7483917

1 Answer
1

active

oldest

votes

0

do you have a better way to filter array using a search input?

One approach is to create a custom filter:

app.filter("myFilter", function() 
 return function(inputArr,vname) 

 //repopulate the array from a copy every time input changes

 var result = inputArr.concat();

 //filter array if vname is a substring from item.name

 if (vname && vname.trim() != '') 
 result = result.filter((item) => 
 return (item.name.toLowerCase().indexOf(vname.toLowerCase()) > -1);
 );
 ;

 return result;
 ;
)

Usage:

<input type="text" ng-model="namev" />

<div ng-repeat="item in items | myFilter : namev">
 item.name item.contents
</div>

For more information, see AngularJS Developer Guide - Creating Custom Filters

---

can you explain the purpose of inputArr ?

The first argument to the filter function is the array to be filtered. This way it can be used with other scope variables:

<div ng-repeat="item in items | myFilter : namev">
 item.name item.contents
</div>

<div ng-repeat="o in otherItems | myFilter : namev">
 o.name o.contents
</div>

When AngularJS pipes data to a filter, it invokes the filter function with the data as the first argument. Subsequent arguments come from expressions separated by colons (:).

For more information, see AngularJS Developer Guide - Using filters in view templates

share|improve this answer

edited Mar 23 at 14:55

answered Mar 23 at 14:18

georgeawggeorgeawg

36k115470

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can you explain the purpose of inputArr ?
  
  – Amine Da.
  Mar 23 at 14:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  See update to answer.
  
  – georgeawg
  Mar 23 at 14:56
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55313939%2fangularjs-filter-array-with-unsaved-changes-by-name-using-an-input-tag%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

do you have a better way to filter array using a search input?

One approach is to create a custom filter:

app.filter("myFilter", function() 
 return function(inputArr,vname) 

 //repopulate the array from a copy every time input changes

 var result = inputArr.concat();

 //filter array if vname is a substring from item.name

 if (vname && vname.trim() != '') 
 result = result.filter((item) => 
 return (item.name.toLowerCase().indexOf(vname.toLowerCase()) > -1);
 );
 ;

 return result;
 ;
)

Usage:

<input type="text" ng-model="namev" />

<div ng-repeat="item in items | myFilter : namev">
 item.name item.contents
</div>

For more information, see AngularJS Developer Guide - Creating Custom Filters

---

can you explain the purpose of inputArr ?

The first argument to the filter function is the array to be filtered. This way it can be used with other scope variables:

<div ng-repeat="item in items | myFilter : namev">
 item.name item.contents
</div>

<div ng-repeat="o in otherItems | myFilter : namev">
 o.name o.contents
</div>

When AngularJS pipes data to a filter, it invokes the filter function with the data as the first argument. Subsequent arguments come from expressions separated by colons (:).

For more information, see AngularJS Developer Guide - Using filters in view templates

share|improve this answer

edited Mar 23 at 14:55

answered Mar 23 at 14:18

georgeawggeorgeawg

36k115470

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can you explain the purpose of inputArr ?
  
  – Amine Da.
  Mar 23 at 14:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  See update to answer.
  
  – georgeawg
  Mar 23 at 14:56
  

  
  
  
  

add a comment | 

0

do you have a better way to filter array using a search input?

One approach is to create a custom filter:

app.filter("myFilter", function() 
 return function(inputArr,vname) 

 //repopulate the array from a copy every time input changes

 var result = inputArr.concat();

 //filter array if vname is a substring from item.name

 if (vname && vname.trim() != '') 
 result = result.filter((item) => 
 return (item.name.toLowerCase().indexOf(vname.toLowerCase()) > -1);
 );
 ;

 return result;
 ;
)

Usage:

<input type="text" ng-model="namev" />

<div ng-repeat="item in items | myFilter : namev">
 item.name item.contents
</div>

For more information, see AngularJS Developer Guide - Creating Custom Filters

---

can you explain the purpose of inputArr ?

The first argument to the filter function is the array to be filtered. This way it can be used with other scope variables:

<div ng-repeat="item in items | myFilter : namev">
 item.name item.contents
</div>

<div ng-repeat="o in otherItems | myFilter : namev">
 o.name o.contents
</div>

When AngularJS pipes data to a filter, it invokes the filter function with the data as the first argument. Subsequent arguments come from expressions separated by colons (:).

For more information, see AngularJS Developer Guide - Using filters in view templates

share|improve this answer

edited Mar 23 at 14:55

answered Mar 23 at 14:18

georgeawggeorgeawg

36k115470

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  can you explain the purpose of inputArr ?
  
  – Amine Da.
  Mar 23 at 14:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  See update to answer.
  
  – georgeawg
  Mar 23 at 14:56
  

  
  
  
  

add a comment | 

do you have a better way to filter array using a search input?

One approach is to create a custom filter:

app.filter("myFilter", function() 
 return function(inputArr,vname) 

 //repopulate the array from a copy every time input changes

 var result = inputArr.concat();

 //filter array if vname is a substring from item.name

 if (vname && vname.trim() != '') 
 result = result.filter((item) => 
 return (item.name.toLowerCase().indexOf(vname.toLowerCase()) > -1);
 );
 ;

 return result;
 ;
)

Usage:

<input type="text" ng-model="namev" />

<div ng-repeat="item in items | myFilter : namev">
 item.name item.contents
</div>

For more information, see AngularJS Developer Guide - Creating Custom Filters

---

can you explain the purpose of inputArr ?

The first argument to the filter function is the array to be filtered. This way it can be used with other scope variables:

<div ng-repeat="item in items | myFilter : namev">
 item.name item.contents
</div>

<div ng-repeat="o in otherItems | myFilter : namev">
 o.name o.contents
</div>

When AngularJS pipes data to a filter, it invokes the filter function with the data as the first argument. Subsequent arguments come from expressions separated by colons (:).

For more information, see AngularJS Developer Guide - Using filters in view templates

share|improve this answer

edited Mar 23 at 14:55

answered Mar 23 at 14:18

georgeawggeorgeawg

36k115470

app.filter("myFilter", function() 
 return function(inputArr,vname) 

 //repopulate the array from a copy every time input changes

 var result = inputArr.concat();

 //filter array if vname is a substring from item.name

 if (vname && vname.trim() != '') 
 result = result.filter((item) => 
 return (item.name.toLowerCase().indexOf(vname.toLowerCase()) > -1);
 );
 ;

 return result;
 ;
)

<input type="text" ng-model="namev" />

<div ng-repeat="item in items | myFilter : namev">
 item.name item.contents
</div>

<div ng-repeat="item in items | myFilter : namev">
 item.name item.contents
</div>

<div ng-repeat="o in otherItems | myFilter : namev">
 o.name o.contents
</div>

share|improve this answer

edited Mar 23 at 14:55

answered Mar 23 at 14:18

georgeawggeorgeawg

36k115470

answered Mar 23 at 14:18

georgeawggeorgeawg

36k115470

answered Mar 23 at 14:18

georgeawggeorgeawg

36k115470