在ng-if AngularJS

时间:2015-06-10 07:57:07

标签: javascript html angularjs

我有以下要求,

我有一个数组作为客户(cust1,cust2,cust3等值)。 我有文本框,当我输入一些值时,它会过滤客户arraylist并显示我的结果(例如:如果我在文本框中输入cust1,它将显示cust1) 如果在文本框中输入的值不在arraylist(customers)中,我想将文本框颜色更改为红色。 任何人都可以指导这样做。

我的方法

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

1 个答案:

答案 0 :(得分:1)

解决方法很简单。

首先,您需要按以下方式修改ng-repeat

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

最后请注意as filteredCustomers。这会将生成的过滤器保存到$scope.filteredCustomers

然后,您只需修改输入以使用条件CSS类:

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

此外,您还必须使用.red或类似内容定义background-color: red; CSS类。

概念证明:http://jsbin.com/diyehagemo/2/