在AngularJs中编辑内联不使用ng-repeat答案

【问题标题】：Editing inline not working with ng-repeat in AngularJs在AngularJs中编辑内联不使用ng-repeat
【发布时间】：2016-12-05 21:18:11
【问题描述】：

我有使用 ng-repeat 的数据列表，我绑定如下。

<div class="col-xs-12" ng-repeat="rl_node in rl.nodes">
  <div class="row">
    <div class="col-xs-12 col-sm-3">
        <span ng-hide="editRoleEntity">{{rl_node.id}}</span>
        <input ng-show="editRoleEntity" type="text" class="form-control" id="txtRoleId" ng-model="rl_node.id" placeholder=""/>
    </div>
    <div class="col-xs-12 col-sm-6">
        <span ng-hide="editRoleEntity">{{rl_node.title}}</span>
        <input ng-show="editRoleEntity" type="text" class="form-control" id="txtRoleName" ng-model="rl_node.title" placeholder=""/>
    </div>
    <div class="col-xs-12 col-sm-3 text-right">
      <a class="pull-right btn btn-danger btn-xs" ng-click="editEnable(rl_node)" ng-if="!editRoleEntity"><span class="glyphicon glyphicon-trash"></span></a>
      <a class="pull-right btn btn-primary btn-xs" ng-click="editRoleEntity = false" ng-if="editRoleEntity"><span class="glyphicon glyphicon-remove"></span></a>
      <a class="pull-right btn btn-primary btn-xs" ng-click="save(rl_node)" ng-if="editRoleEntity" style="margin-right: 8px;"><span class="glyphicon glyphicon-ok"></span></a>
      <a class="pull-right btn btn-primary btn-xs" ng-click="editRoleEntity = true"><span class="glyphicon glyphicon-pencil"></span></a>
    </div>
  </div>
</div>

我有四个按钮编辑、保存、取消和删除。

我面临的问题是，一旦使editRoleEntity = true，它就会启用所有行的数据

在上图中，我尝试编辑第一行，

请建议我如何仅在单击编辑图标的那一行显示文本框。

谢谢

【问题讨论】：

标签： angularjs inline edit

【解决方案1】：

不知道editEnable(rl_node)方法里面的代码是什么；你可以有这样的东西：

function editEnable(rl_node)
{
  //depends on how you specify the scope variable - it could be $scope.property or this.property
  $scope.selectedNodeId = rl_node.id;
}

在 html 中：

<span ng-hide="selectedNodeId !== rl_node.id">{{rl_node.id}}</span>
<input ng-show="selectedNodeId === rl_node.id" type="text" class="form-control" id="txtRoleId" ng-model="rl_node.id" placeholder=""/>

【讨论】：