Question

我正在做下一件事。我想在输入中输入空值，突出显示边界（添加新类＆＃39;警告＆＃39;）。我创建了以下代码。

HTML：

`<body ng-app="TestPage">
 <form ng-controller="TestForm">
  <input ng-model="testinput" class="form-input" ng-class="testclass" type="text"/>
  <button ng-click="submitButton()">Click</button>
</form>
</body>`

JavaScript的：

`angular.module('TestPage',[])
    .controller('TestForm', function($scope, $animate) {
         $scope.submitButton = function() {
             if (($scope.testinput == undefined) || ($scope.testinput == "")) {
                 $animate.addClass($scope.testclass, "warning");
             }
         };
    });`

但使用addClass不起作用。我做错了什么？

Answer 1

根据document

服务$ animate的addClass函数有三个参数;

第一个参数是CSS类将应用于的元素。

第二个参数是将要添加的CSS类（多个类通过空格分隔）

Third params是将应用于元素的可选/样式的可选集合。

所以你应该尝试这样做：

HTML：

`<body ng-app="TestPage">
 <form ng-controller="TestForm">
  <input id="target_element" ng-model="testinput" class="form-input" ng-class="testclass" type="text"/>
  <button ng-click="submitButton()">Click</button>
</form>
</body>`

的javascript：

`angular.module('TestPage',[])
    .controller('TestForm', function($scope, $animate) {
         $scope.submitButton = function() {
             if (($scope.testinput == undefined) || ($scope.testinput == "")) {
                 $animate.addClass(angular.element('#target_element'), "warning");
             }
         };
    });`

更好的方法是使用directive。

module.directive('addClassBy',['$animate',function($animate){
    return function(scope,element){
        scope.$watch('testinput',function(newValue,oldValue){
            if(newValue === oldValue){return};
            if(newValue === undefined || newValue === ''){
                 $animate.addClass(element,'warning')
            }
        })
    }
}])

然后是html：

`<body ng-app="TestPage">
     <form ng-controller="TestForm">
      <input add-class-by ng-model="testinput" class="form-input" ng-class="testclass" type="text"/>
      <button ng-click="submitButton()">Click</button>
    </form>
    </body>`

Angular JS：将类添加到元素

1 个答案: