Question

我只想一次显示一个错误消息，我想用ng开关来实现它，这比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保存要评估的表达式，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需要一个表达式。与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);
}]);

如何使用ng开关更好地验证

3 个答案: