Editing inline not working with ng-repeat in AngularJs

Question

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

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

Developer · Accepted Answer · 2016-12-05 13:18:11Z

1

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

answered Dec 5, 2016 at 13:18

Developer

6,4703 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Editing inline not working with ng-repeat in AngularJs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related