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

Question

我有使用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>

我有四个按钮编辑，保存，取消＆amp;删除。

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

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

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

由于

Answer 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=""/>