1

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

一度に 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

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 に答える
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 に答える