CODEWITHSUNDEEP
javascripthtmlangularjs
user2000189
user2000189

Reputation: 519

Use ng-repeat within ng-if AngularJS

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

Upvotes: 2

Views: 116

Answers (1)

alesc
alesc

Reputation: 2780

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/

Upvotes: 1

Related Questions