這是我的代碼，當輸入框爲空且不爲空時，我想將類添加到'label'。 所以，我檢查輸入框是否爲空，並根據此添加類。 它在頁面重新加載時起作用，但當我輸入null時，類不會改變。如何在ng-model值更改時動態更改ng-class？
<div class="col-md-12">
<input type="text" name="name" id="name" class="input-border" ng-model="userProfile.name"/> {{userProfile.name}}
<label for="name" ng-class="userProfile.name === null ?'custom-label-no-content':'custom-label-content'" class="xs-keep-label-in-place">Display Name</label>
</div>
這裏是無需控制器的答案，
因爲它是一個文本框，你應該使用
userProfile.name.length and !userProfile.name.length
ng-class="{ 'custom-label-no-content': userProfile.name.length, 'custom-label-content': !userProfile.name.length }"
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
.custom-label-no-content {
color:white;
background-color:lightblue;
padding:20px;
font-family:"Courier New";
}
.custom-label-content {
background-color:coral;
padding:40px;
font-family:Verdana;
}
</style>
<body ng-app="">
<div class="col-md-12">
<input type="text" name="name" id="name" class="input-border" ng-model="userProfile.name"/> {{userProfile.name}}
<label for="name" ng-class="{ 'custom-label-no-content': userProfile.name.length, 'custom-label-content': !userProfile.name.length }" class="xs-keep-label-in-place">Display Name</label>
</div>
</body>
</html>請執行上面的代碼中
謝謝Sravan。 – hasi
您可以通過多種方式來實現。
HTML
<label for="name" ng-class="labelClass()" class="xs-keep-label-in-place">Display Name</label>
JS
$scope.labelClass = function(){
var classes = [];
if($scope.userProfile.name === null){
classes.push('custom-label-no-content');
}else{
classes.push('custom-label-content');
}
return classes;
}
HTML與硬編碼類
<label for="name" ng-class="{ 'custom-label-no-content': userProfile.name === null, 'custom-label-content': userProfile.name !== null }" class="xs-keep-label-in-place">Display Name</label>
HTML
<div class="col-md-12" ng-switch="userProfile.name === null">
<input type="text" name="name" id="name" class="input-border" ng-model="userProfile.name"/> {{userProfile.name}}
<label for="name" ng-switch-when="true" class="custom-label-no-content xs-keep-label-in-place">Display Name</label>
<label for="name" ng-switch-when="false" class="custom-label-content xs-keep-label-in-place">Display Name</label>
</div>
就個人而言，我會因爲它符合MVC模式，你的「邏輯推薦選擇1 「應保留在您的控制器中，而您的」查看「代碼仍然純粹用於顯示。
試試這個。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
.custom-label-no-content {
border: 1px solid red;
}
.custom-label-content {
border: 1px solid green;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" name="name" id="name" class="input-border" ng-model="userProfile.name" /> {{userProfile.name}}
<label for="name" ng-class="userProfile.name === '' ?'custom-label-no-content':'custom-label-content'" class="xs-keep-label-in-place">Display Name</label>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.userProfile = {};
$scope.userProfile.name = '';
});
</script>
</body>
</html>
'納克級=「{ '自定義標籤沒有內容'：userProfile.name ===空， '自定義標籤內容'：userProfile.name = = null}「' – haxxxton
@haxxxton你真快。我即將回答這個問題。 Wkwkwk。 –
@haxxxton它不工作，也許是因爲在ng模型中發生的變化沒有綁定在ng-class中。 – hasi