Use ng-repeat within ng-if AngularJS

Question

I have the following requirement,

I have an array as customers (values such as cust1,cust2,cust3). I have textbox, in which when I enter some values it will filter the customers arraylist and displays my result (For example : if i enter cust1 in textbox, it will display cust1) If the value entered in textbox not in the arraylist (customers), i want to change textbox colour to red. Could anyone guide to do this.

My approach

<div class="container">
<h2>View 1</h2>
Name:
<br />
<input type="text" ng-model="filter.name" /> -- I want to change this textbox colour
<br/>
<ul>
<li ng-repeat="cust in customers | filter : filter.name | orderBy:name">{{cust.name}} {{cust.city}}</li>
</ul>
<br/>

You have ng-model instead of ng-repeat <li ng-repeat="cust in customers | filter : filter.name | orderBy:name">{{cust.name}} {{cust.city}}</li> — Raulucco
– Raulucco, Commented Jun 10, 2015 at 8:02
Check this stackoverflow.com/questions/15316363/… , use ng-if to change the color — Shafeeque
– Shafeeque, Commented Jun 10, 2015 at 8:07
It is ng-repeat only, i have edited it. But the link provided was not discussing on color change of ng-model text box, instead it is displaying the filtered result alone. — user2000189
– user2000189, Commented Jun 10, 2015 at 9:24

alesc · Accepted Answer · 2015-06-10 11:41:37Z

1

The solution for this is rather simple.

First, you need to modify your ng-repeat in the following way:

ng-repeat="cust in customers | filter : filter.name | orderBy:name as filteredCustomers"

Notice the as filteredCustomers in the end. This saves the resulting filter to $scope.filteredCustomers.

Then, you just have to modify your input to use a conditional CSS class:

<input type="text" ng-model="filter.name" data-ng-class="{'red': filteredCustomers.length === 0}" />

Also you will have to define the .red CSS class with background-color: red; or something similar.

Proof of concept: http://jsbin.com/diyehagemo/2/

edited Jun 10, 2015 at 11:41

answered Jun 10, 2015 at 10:22

alesc

2,7783 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2000189 Over a year ago

Yes it is working, But When we are adding filteredCustomers it does not allow order by statement

alesc Over a year ago

The orderBy statement should also be working, but you have to put it before the as filteredCustomers. Have you edited the ng-repeat according to my answer? Also, you should not modify the filteredCustomers variable. This is just so that you can access the actual filtered AND sorted values in order to see it they are empty or not - for the purpose of colouring the input.

Collectives™ on Stack Overflow

Use ng-repeat within ng-if AngularJS

My approach

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

My approach

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related