在AngularJs中编辑内联不能与ng-repeat一起工作

问题描述:

我有使用ng-repeat的数据列表,我绑定如下。在AngularJs中编辑内联不能与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 =真,这让使所有行的数据

enter image description here 在我尝试编辑第一行以上的图像,

请建议我怎么能只显示该行的文本框,点击编辑图标。

感谢

不知道里面是什么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=""/> 
+0

感谢 它与简单的修改工作 –