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/>

Check this http://stackoverflow.com/questions/15316363/how-to-display-length-of-filtered-ng-repeat-data , use ng-if to change the color — Shafeeque, Jun 10 '15 at 08: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, Jun 10 '15 at 09:24

alesc · Accepted Answer · 2015-06-10T11:41:37.867

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 '15 at 11:41

answered Jun 10 '15 at 10:22

alesc

2,776
3
27
45

Yes it is working, But When we are adding **filteredCustomers** it does not allow order by statement – user2000189 Jun 11 '15 at 07:27
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. – alesc Jun 11 '15 at 07:31

Use ng-repeat within ng-if AngularJS

My approach

1 Answers1