在 ng-if AngularJS 中使用 ng-repeat

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

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