Угловой JS: Добавить класс в элемент

Я делаю следующее. Я хочу ввести пустые значения в поле ввода, выделенное границей (добавлено предупреждение нового класса). Я создал следующий код.Угловой JS: Добавить класс в элемент

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 не работает. Что я делаю не так?

источник

2016-08-28 Victor

Первый параметр addClass должен быть элемент – Dario

Но, как к этому элементу в контроллере? Не использует ng-класс? – Victor

Согласно document

функция addClass в сервис $ анимировать имеет три параметра;

Первый параметр - это элемент, к которому будут применены классы CSS.

Второго PARAMS класс CSS (ы), которые будут добавлены (несколько классов разделяются с помощью пробелов)

Третьего 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>`

источник

2016-08-28 13:33:10 Qiu

Спасибо за опцию angular.element. Поговорите с ним. О 'директиве': ваш код работает некорректно, класс изменяется только один раз. – Victor

Угловой JS: Добавить класс в элемент

ответ

Смежные вопросы