Question

我想用ng repeat生成输入，问题是当我有错误时这仅适用于最后一个元素，我如何才能对每个元素应用？

<form name="setPlayersForm">
  <div ng-repeat="player in rp.KillerService.getPlayers() track by $index" class="name-input">
    <input type="text"
           placeholder="Your Name"
           ng-model="player.name"
           required/>
    <a class="fa fa-trash-o" ng-if="player.newPlayer" ng-click="rp.removePlayer(player)"></a>
  </div>
  <ng-messages for="setPlayersForm.$error" ng-if="rp.submitted">
    <ng-message when="required" class="alert-box alert">This field is required</ng-message>
  </ng-messages>
</form>

Answer 1

我不知道我是否理解了你的问题，但我使用这种方法来处理ng-repeat中的输入。请考虑以下代码

<form name="sampleForm" novalidate>
    <div ng-repeat="item in items">
        <input type="text" name="name{{$index}}" required ng-model="item.name">
        <div ng-messages="sampleForm['name'+$index].$error">
            <div ng-message="required" class="error">This field is required</div>
        </div>

        <input type="text" name="price{{$index}}" required ng-model="item.price">
        <div ng-messages="sampleForm['price'+$index].$error">
            <div ng-message="required" class="error">This field is required</div>
        </div>
    </div>
</form>

只需按照代码即可。如果有些事情不明确，请在下面评论

Answer 2

ngMessage就像一个切换案例，你需要传递正确的组来检测错误，当你以角度创建一个表单时，他通过表单名称和输入名称包装表单，例如：

<form name="myForm">
  <input name="myInput">
  <input name="myInput2">
  <input name="myInput3">
</form>

包装到这样的东西，每个都有错误：

myform = {
 myInput: {
  $error:{
   //...
  }
 },
 myInput2: {
   //...
 },
 myInput3:{
   //...
 },
   //...
}

您正在使用表单的名称，并且不包含每个元素的实际错误（包含包含每个错误的所有相关数据的数组），您必须使用输入名称的名称，如此plunkr：

http://plnkr.co/edit/I43HTQeWZS85N55hXGfF?p=preview

HTML：

<form name="setPlayersForm">
  <div ng-repeat="player in players track by $index" class="name-input">
    <div ng-init="player.form_name='player'+player.id" ></div>
    <input type="text"
           placeholder="Your Name"
           ng-model="player.name"
           name="{{player.form_name}}"
           required/>


           <ng-messages for="setPlayersForm[player.form_name].$error" ng-if="setPlayersForm[player.form_name].$touched">
              <ng-message when="required" class="alert-box alert">This field is required</ng-message>
          </ng-messages>
  </div>
</form>

JS：

var app = angular.module('plunker', ['ngMessages']);

app.controller('MainCtrl', function($scope) {

  $scope.players = [{
    name: "jhon",
    id:1 
  },
  {
    name: "jhon1",
    id:2 
  },
  {
    name: "jhon2",
    id:3 
  },
  {
    name: "jhon3",
    id:4 
  }
    ];
});

Answer 3

我正在使用 ng-form 并执行以下操作：

将表单名称设置为与ng-repeat
将name属性赋予控件

在ng-message中显示 formName.controlName。$ error

class Product < ActiveRecord::Base
  # ...

  after_create :init_views_count_buffer

  private

  def init_views_count_buffer
    reset_views_count_buffer(views_count || 0)
  end

  def views_count_cache_key
    "#{cache_key}/views_count_buffer"
  end

  def reset_views_count_buffer(value = 0)
    Rails.cache.set(views_count_cache_key, value)
  end

  # Called from controllers etc
  def increment_views_count_buffer
    Rails.cache.increment(views_count_cache_key)
  end

  def update_counts!
    transaction do
      update!(
        likes_count: likes.count,
        views_count: views_count + (Rails.cache.fetch(views_count_cache_key) || 0),
        # Or, if you have a separate views table:
        # views_count: views.count,
        comments_count: comments.count,
      )
      reset_views_count_buffer
    end
  end
end

Angular ng消息显示ng重复表单上的错误

3 个答案: