如何在重復的md-input-container中使用ng-messages

Question

使用Angular 1.5.5和Angular-Material 1.0.9，我創建了一個具有重復input元素的HTML表單。 我想將ngMessages用於錯誤消息。 我遇到的問題是，當我輸入例如-1 ，正確的錯誤消息顯示在工具提示中，而不是在輸入元素下方。 問題似乎是ng-messages屬性不像input的name屬性一樣支持插值。 我可以將一個變量包含到包含正確名稱的$scope中，但是我對該選項不滿意，因為然后在HTML模板和JavaScript控制器中定義了input的name 。 有沒有辦法更干凈地做到這一點？

<form name="form">
  <md-input-container ng-repeat="product in purchase.products">
    <input type="number" min="0" max="9999" ng-model="product.quantity"
      name="product[{{$index}}].quantity"> 
    <div ng-messages="form.product[$index].quantity.$error" md-auto-hide="false">
      <div ng-message="min">Please enter 0 or more</div>
      <div ng-message="max">Please enter 9999 or less</div>
    </div>
  </md-input-container>
</form>

需要特別清楚的是：在呈現的DOM中，存在<input name="product[0].quantity"而ng-messages不變，並且不評估$index 。 我想我需要一個計算結果為"product[0].quantity"的表達式。

Answer 1

將您的name 屬性更改為：

<input type="number" min="0" max="9999" required ng-model="product.quantity" name="product_{{$index}}">

和您的ngMessages到：

<div ng-messages="form['product_' + $index].$error">

現在應該可以了。