1

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>
4

3 回答 3

2

你把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/

于 2013-05-22T18:22:56.863 回答
1

失败的原因有几个。

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>
于 2013-05-22T18:21:02.643 回答
1

正如 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);
}]);
于 2013-05-22T18:48:46.283 回答