ng-repeat和访问项目元素

Question

我正在使用ng-repeat生成表（例如）：

<table ng-repeat="item in items">
  <tr>
      <td>
          <input ng-blur="changeMyItem($event)">{{item.Name}}</input>
      <td>
      <td>
          <div>{{itemError}}</div>
      </td>
  </tr>
</table>

我正在拨打一个可能会失败的呼叫，并且在弄清楚页面有错误时，我很难弄清楚如何在错误消息上方设置上述itemError到错误消息。

从我的changeMyItem方法（由ng-blur触发）中，我尝试了表达式语法，它只是变成一个空的div。 我还尝试了在成功回调中调用$ scope。$ apply，并说$ digest已经在执行和出错了。

不使用自定义指令，如何使用相关错误更新上面的itemError？

Answer 1

好吧，我认为最简单的方法是对每个重复的表进行ng-init ，然后将其传递给changeMyItem函数：

<table ng-repeat="item in items" ng-init="itemError = { message : '' }" >
    <tr>
        <td>
            <input ng-blur="changeMyItem($event, itemError)">{{item.Name}}</input>
        </td>
        <td>
            <div>{{itemError.message}}</div>
        </td>
    </tr>
</table>

使用具有属性的对象，以便将其通过引用传递给函数。

然后，您可以执行以下操作：

$scope.changeMyItem = function(event, error) {
       //whatever
       error.message = "It didn't work!";
}

Answer 2

您确实应该使用服务：

<table ng-repeat="item in myForm.items track by $index">
  <tr>
      <td>
          <label>{{item.Title}}</label>
          <input ng-blur="myForm.changeMyItem($event, $index)" ng-model="item.Value">
      <td>
      <td>
          <div>{{item.Error}}</div>
      </td>
  </tr>
</table>

然后

app.factory('myForm', function(){
  var myform = {};
  myForm.items = [{ ... }];
  myForm.changeMyItem = function(event, index){

 };

  myForm.submit = function(){

  };

  myForm.setErrors = function(){

  };
  ...

  return myForm;

});

Answer 3

迈克，如果您要为每个单独的输入设置错误消息，则应该这样做。

<table ng-repeat="item in items">
  <tr>
    <td>
       <input ng-blur="changeMyItem(item, $event)" ng-model="item.Name">
    <td>
    <td>
      <div>{{item.ErrorMessage}}</div>
    </td>
  </tr>
</table>

在控制器中，您可以拥有类似于以下内容的内容：

$scope.changeMyItem = function(item, $event) {
    if(!item.Name) {
       item.ErrorMessage = "This has error";
    }
}