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> 

나는 네 개의 버튼을 편집, 저장, & 제거 취소가 있습니다.

내가 직면 해요 문제는

어떻게 할 수 제안하십시오, 한 번 editRoleEntity = true를 만드는 것은, 모든 행의 데이터 내가 첫 번째 행을 편집하려고 위의 이미지에서

에 가능하게한다는 것입니다 편집 아이콘을 클릭 한 행의 텍스트 상자 만 표시합니다.

감사

Answer 1

editEnable(rl_node) 방법 내부의 코드가 무엇인지 확실하지;

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