如何在AngularJS中的ng-repeat循环中使用ng-model?

时间:2017-10-24 08:39:00

标签: javascript angularjs arrays loops

如何在AngularJS中的ng-repeat循环中使用ng-model? 数据库是mySQL,我也是这样做的,因为我想在数据显示的同一行编辑。 我认为这个细节可以理解

<tbody ng-repeat="x in names">
    <tr class="edit-row">
        <td>
            <div class="form-group editable">
                <div class="input-group">
                    <input class="form-control" name="x.fname" ng-model="x.fname_m" value="{{x.fname}}" disabled /> </div>
            </div>
        </td>
        <td>
            <div class="form-group editable">
                <div class="input-group">
                    <input class="form-control" value="{{x.email}}" disabled /> </div>
            </div>
        </td>
        <td>
            <button class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#followUps1"><i class="fa fa-calendar"></i> </button>
            <a class="btn btn-xs btn-warning btn-collapse" data-toggle="collapse" data-target="#oppTasks1"> <i class="fa fa-star"></i> </a>
            <a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewDetail1"> <i class="fa fa-eye"></i> </a>
            <a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewComment1"> <i class="fa fa-comments"></i> </a>
            <button ng-click="updateData(x.id, x.fname, x.lname, x.email, x.phone,  x.country, x.skype_id, x.lead_source, x.lead_status, x.lead_priority)" class="btn btn-edit btn-primary btn-xs"><i class="fa fa-pencil"></i>
            </button>
            <button class="btn btn-update btn-success btn-xs"><i class="fa fa-floppy-o"></i>
            </button>
        </td>
    </tr>
</tbody>

2 个答案:

答案 0 :(得分:2)

我会建议:

<tbody ng-repeat="x in names track by $index">
  <tr class="edit-row">
    <td>
      <div class="form-group editable">
        <div class="input-group">
          <input class="form-control"
            name="x.fname" ng-model="x.fname_m[$index]"
             value="{{x.fname}}" disabled /> </div>
        </div>
      </td>
//... rest of your code

使用&$ 39;跟踪$ index&#39;在重复上,然后通过模型[$ index]访问模型。如果您没有填充模型,我可能会建议您在控制器的开头将模型设置为null:

$onInit() {
  this.fname_m = {};
}

答案 1 :(得分:0)

<div ng-repeat="item in items">
<input ng-model="item.valueobject">
</div>

或绑定

<div ng-repeat="item in items">
{{ item.valueobjects }}
</div>