CODEWITHSUNDEEP
angularjsinlineedit
Khilen Maniyar
Khilen Maniyar

Reputation: 2579

Editing inline not working with ng-repeat in AngularJs

I have list of data comes using ng-repeat and I bound as below.

<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>

I have four button Edit, Save, Cancel & Remove.

The Issue I'm facing is that once making editRoleEntity = true, it makes enable to all row's data

enter image description here In Above image I tried to edit first row,

Please suggest how I can show textbox only for that row where I click edit icon.

Thanks

Upvotes: 1

Views: 159

Answers (1)

Developer
Developer

Reputation: 6440

Not sure what is the code inside editEnable(rl_node) method; you can have something like this:

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;
}

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

Upvotes: 1

Related Questions