CODEWITHSUNDEEP
angularjs
Odinn
Odinn

Reputation: 1106

How to choose exact row in table while editing with angular?

I'm creating editable table, and while editing all rows became input fields, how to choose only one row that I'm clicking on?

This is a piece of my table

<table>
 <tr ng-repeat="item in data track by $index">
   <td>
      <span ng-if="!editing">{{item.username}}</span>
      <span ng-if="editing">
         <!-- If I use ng-if="editing && index == $index" than all other fields disappear -->
         <input type="text" name="name" class="form-control" ng-model="item.username">
      </span>
   </td>
   <td>
      <div ng-if="!editing">
         <button ng-click="edit()" >Edit</button>
      </div>
   </td>
 </tr>
<table>

Controller:

.controller('formCtrl', function($scope) {

        $scope.editing = false;
        $scope.index = "";
        $scope.edit = function(index) {
            $scope.editing = true;
            $scope.index = index;
        };

Upvotes: 0

Views: 182

Answers (2)

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

pass index on click

try like this 

<button ng-click="edit($index)" >Edit</button>

Or the object itself

<button ng-click="edit(item)" >Edit</button>

JSFIDDLE

Upvotes: 1

Erazihel
Erazihel

Reputation: 7605

You have to check that the index of the current item is not the item in edition while in editing mode:

<span ng-if="!editing || index!=$index">{{item.username}}</span>
<span ng-if="editing && index==$index">
    <input type="text" name="name" class="form-control" ng-model="item.username">
</span>

See working JsFiddle: http://jsfiddle.net/805rt1wd/1/

Upvotes: 1

Related Questions