как использовать переключатель нг лучше проверить

Question

http://jsfiddle.net/x3azn/AbmsG/1/

Я только хочу, чтобы показать ошибки Msgs один в то время, я имею в виду делать это с нг переключатель, который больше кода эффективнее, чем нг: шоу, однако алгоритм Я сейчас не работаю.

<div class="errorDiv" ng-switch on="true"> 
     <div ng-switch-when="form.LastName.$error.required" style="color: white; background-color: red">required</div> 
     <div ng-switch-when="form.LastName.$error.len" style="color: white; background-color: red">len</div> 
     <div ng-switch-when="form.LastName.$error.dallas" style="color: white; background-color: red">dallas</div> 
    </div> 

Answer 1

Вы получили ng-switch логики в обратном направлении. on содержит выражение для оценки, и when удерживает все, что нужно. Вы не можете сделать это таким образом, но это показывает, что я имею в виду:

<div class="errorDiv" ng-switch on="form.LastName.$error.required"> 
    <div ng-switch-when="true" style="color: white; background-color: red">required</div> 
</div> 
<div class="errorDiv" ng-switch on="form.LastName.$error.len"> 
    <div ng-switch-when="true" style="color: white; background-color: red">len</div> 
</div> 
<div class="errorDiv" ng-switch on="form.LastName.$error.dallas"> 
    <div ng-switch-when="true" style="color: white; background-color: red">dallas</div> 
</div> 

http://jsfiddle.net/AbmsG/3/

Answer 2

Существует несколько причин, по которым это не удается.

ng-switch-when ожидает строку. Итак, первый случай, например, сравнивается с строковым литералом «form.LastName. $ Error.required», а не свойство объекта с тем же именем.

Напротив, ng-switch ожидает выражения. Единственный случай, который будет соответствовать выражению ontrue, является строковым литералом «true».

Это будет работать вместо того, чтобы хотя без точного поведения вы хотите:

<div class="errorDiv" ng-switch on="form.LastName.$error.required"> 
    <div ng-switch-when="true" style="color: white; background-color: red">required</div> 
</div> 
<div class="errorDiv" ng-switch on="form.LastName.$error.len"> 
    <div ng-switch-when="true" style="color: white; background-color: red">len</div> 
</div> 
<div class="errorDiv" ng-switch on="form.LastName.$error.dallas"> 
    <div ng-switch-when="true" style="color: white; background-color: red">dallas</div> 
</div> 

Answer 3

Как dnc253 сказал ваш ng-switch логика откусил. Следующее даст вам точные функции, которые вы хотели.

http://jsfiddle.net/ud3323/AbmsG/4/

HTML

<form ng-app="someApp" name="form" ng-controller="MainCtrl"> 
    <input validate name="LastName" ng-model="form.lastName" dallas len = "5" required /> 
    <div class="errorDiv" ng-switch on="currentError"> 
    <div ng-switch-when="required" style="color: white; background-color: red">required</div> 
    <div ng-switch-when="len" style="color: white; background-color: red">len</div> 
    <div ng-switch-when="dallas" style="color: white; background-color: red">dallas</div> 
    </div> 
</form> 

JS

angular.module('someApp', []) 
    .directive('validate', function() { 
    return { 
    require: 'ngModel',   
    link: function(scope, element, attrs, ctrl) { 
     element.bind("keydown keypress", function(event) { 
      if (event.which === 13) { 
       scope.$apply(function() { 
        scope.$eval(attrs.onEnter); 
       }); 
       event.preventDefault(); 
      } 
     }); 
     ctrl.$parsers.push(function(val){ 
      if (!val) val = ''; 
      ctrl.$setValidity('required', 
          val != ''); 
      ctrl.$setValidity('len', 
           val.length == 5); 
      ctrl.$setValidity('dallas', 
        val=='dallas'); 
      return val; 
     }); 
    } 
} 
}).controller('MainCtrl', ['$scope', function ($scope) { 
    $scope.$watch('form.$error', function (errObj) { 
    if (errObj.required) $scope.currentError = "required"; 
     else if (errObj.len) $scope.currentError = "len"; 
     else if (errObj.dallas) $scope.currentError = "dallas"; 
    }, true); 
}]);