如何使用 ng switch 更好地验证

Question

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

我只想一次显示一条错误消息。我正在考虑用ng switch 来做这件事，它比ng:show 代码效率更高，但是我现在拥有的算法目前不起作用。

<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 保存要评估的表达式，whens 保存要匹配的内容。您可能不想这样做，但这说明了我的意思：

<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 需要一个表达式。与on 表达式true 匹配的唯一情况是字符串文字“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);
}]);