1. Function in your Controller (recommended)

Question

这是我的代码，当输入框为空且不为空时，我想将类添加到'label'。所以，我检查输入框是否为null，并根据此添加类。它在页面重新加载时有效，但当我输入为null时，类不会改变。

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

Answer 1

你可以通过多种方式实现这一目标。

1. Function in your Controller (recommended)

<强> 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;
}

2。用单个大括号

表达

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

3。切换语句与硬编码类

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

就个人而言，我建议选项1，因为它符合MVC模式，你的＆＃34;逻辑＆＃34;应该保留在你的控制器中，同时你的＆＃34;查看＆＃34;代码仍然纯粹用于显示。

Answer 2

以下是无需控制器的答案，

由于它是一个文本框，您应该使用

<强> userProfile.name.length and !userProfile.name.length

ng-class="{ 'custom-label-no-content': userProfile.name.length, 'custom-label-content': !userProfile.name.length }"

＆＃13;

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

＆＃13;

请跑上面的SNIPPET

HERE IS A WORKING DEMO

Answer 3

试试这个。

＆＃13;

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

＆＃13;

当ng-model值发生变化时，如何动态更改ng-class？

3 个答案:

1. Function in your Controller (recommended)

2。用单个大括号

3。切换语句与硬编码类