0

我正在使用 ng-repeat 生成一组选择。大多数情况下，它都有效。

现在我正在尝试设置 ngMessages 以显示检查重复选择的自定义指令的错误，并将该 SELECT 设置为无效。

但是，ngMessages 指令属性不喜欢 Form1.Select_{{$index}} 语法。这应该解析为 Form1.SELECT_0 等。注意，这个 sytnax 在 ng-show 属性中起作用。我如何让它为 ngMessages 工作？我需要将 ngMessages 设置为元素 $error 数组。

 <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 回答