AngularJSのng-class条件によってclassを設定するいくつかの方式
2188 ワード
1つ目はdomでclassの値を変数で置き換え、controller関数で変数の値を設定します.次のようになります.
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"/>
<style>
.p_class{
background-color: #00b3ee;
}
</style>
<p ng-class="p_class"> ng-css</p>
<script>
var app=angular.module("myApp",[]);
app.controller("myController", function ($scope) {
$scope.p_class="p_class"
})
</script>
</code></pre>
<p> ， </p>
<p> ： ， dom ， controller </p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"/>
<style>
.active{
background-color: #00b3ee;
}
</style>
<p ng-class="{true:'active',false:'inactive'}[active]"> ng-css</p>
<script>
var app=angular.module("myApp",[]);
app.controller("myController", function ($scope) {
$scope.active=true
})
</script>
</code></pre>
<p> controller active ， active ， inactive 。 dom </p>
<p> ： ， dom ， ： </p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"/>
<style>
.active{
background-color: #00b3ee;
}
</style>
<p ng-class="{'tipIp': nti.type==='ip', 'tipCc': nti.type==='cc', 'tipUrl': nti.type==='url'}"> ng-css</p>
<script>
var app=angular.module("myApp",[]);
app.controller("myController", function ($scope) {
})
</script>
</code></pre>
<p> </p>
</div>
</div>
</div>
</div>