2016-12-05 87 views
0

我有使用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 在我嘗試編輯第一行以上的圖像,

請建議我怎麼能只顯示該行的文本框,點擊編輯圖標。

感謝

回答

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=""/> 
+0

感謝 它與簡單的修改工作 –

相關問題