在 ng-if AngularJS 中使用 ng-repeat

Question

我有以下要求，

我有一个数组作为客户（值如cust1,cust2,cust3 ）。 我有文本框，当我输入一些值时，它将过滤客户数组列表并显示我的结果（例如：如果我在文本框中输入cust1 ，它将显示cust1 ）如果在文本框中输入的值cust1中（客户） ，我想将文本框颜色更改为红色。 任何人都可以指导这样做。

我的方法

<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

对此的解决方案相当简单。

首先，您需要按以下方式修改您的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}" />

此外，您还必须使用background-color: red;定义.red CSS 类background-color: red; 或类似的东西。

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