如何使用 ng-class 更改背景颜色？
Posted
技术标签:
【中文标题】如何使用 ng-class 更改背景颜色？【英文标题】：How can I change the background-color using ng-class? 【发布时间】：2015-11-27 13:42:37 【问题描述】：每当有人在使用 ng-class 时输入“5”时，我都会尝试更改背景颜色。我对 AngularJS 真的很陌生，只是写一些东西来掌握它。我应该在某处使用 ng-if 还是必须更改我的 CSS？另外我必须在哪里输入代码？我知道它必须在我过滤数字的地方，但完全不知道如何编写代码。请帮忙！
这是我的代码：
<body ng-init="numbers=[0,1,2,3,4,5]">
<nav>
<a href="#" ng-click="tab='numbers'" ng-class="active:tab=='numbers'">Numbers</a>
<a href="#" ng-click="tab='form'" ng-class="active:tab=='form'">Form</a>
</nav>
<div ng-switch="tab">
<div ng-switch-when="numbers">
<input type="text" ng-model="myValue" />
<h1 ng-repeat="number in numbers | filter:myValue"> number </h1>
</div>
<div ng-switch-when="form">
<button ng-click="numbers.pop(); tab='numbers'">Pop</button>
<button ng-click="numbers.push(numbers.length); tab='numbers'">Push</button>
</div>
</div>
【问题讨论】：
【参考方案1】：您可以在这里轻松使用ng-style
<input type="text"
ng-model="myValue"
ng-style="'background-color':myValue == 5 ? 'red': 'white'"/>
使用ng-class 会是
标记
<input type="text" ng-model="myValue" ng-class="'myOwnBg': myValue == 5"/>
CSS
.myOwnBg
background-color: yellow;
【讨论】：
成功了！感谢您的快速回复。但是，有没有办法使用 ng-class 来做到这一点？ NM 我的最后一条评论，我猜在我输入问题之前网站刷新速度不够快。再次感谢您的帮助！ @DavidTrinh 很高兴为您提供帮助..谢谢 :)【参考方案2】：就像你对ng-class="active:tab=='numbers'"所做的那样
<input type="text" ng-model="myValue" ng-class=" bg : myValue == 5 ">
如果您不想定义 css 类，可以使用ngStyle。
【讨论】：
以上是关于如何使用 ng-class 更改背景颜色？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 PaginatedDataTable 更改列的背景颜色