0

選択のグループを生成するために ng-repeat を使用しています。ほとんどの場合、機能します。

今、重複選択をチェックするカスタム ディレクティブのエラーを表示するように ngMessages を設定し、その SELECT を無効に設定しようとしています。

ただし、ngMessages ディレクティブ属性は Form1.Select_{{$index}} 構文を好みません。これは Form1.SELECT_0 などに解析する必要があります。この構文は ng-show 属性で機能することに注意してください。これをngMessagesで機能させるにはどうすればよいですか? 要素 $error 配列に ngMessages を設定する必要があります。

 <span class="error" style="color:red" ng-show="Form1.Select_{{$index}}.$touched" ng-messages="Form1.Select_{{$index}}.$error" >
       <span ng-message="required">select an option</span>
      <span ng-messages-include='errormessages.html'>  </span>
</span>
4

1 に答える 1

1

角度表現内で補間 ( ) を使用することはできません{{ }}(たとえば、ng-show または ng-messages 属性値)。

これは、あなたが望むことを行う完全な例です:

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <form name="form1">
      <div ng-repeat="a in ['a', 'b', 'c'] track by $index">
        <select name="selects_{{ $index }}" ng-model="selections[$index]" required>
          <option value=""></option>
          <option value="1">1</option>
          <option value="2">1</option>
          <option value="3">1</option>
        </select>

        {{ selections[$index] }}

        <span class="error" style="color:red" ng-show="form1['selects_' + $index].$touched" ng-messages="form1['selects_' + $index].$error">
          <span ng-message="required">select an option</span>
        </span>
      </div>
    </form>
  </body>

</html>
于 2016-04-04T17:41:48.887 に答える