How can i change a row in table after ng-repeat with filter

Question

I'm making UI like Excel. But i have a big trouble.

I need when i click to update button, and only THIS row in table change template to edit (like

to ...). But i cannot do it. Thai is my way:

<tbody dir-paginate="student in ClassStudents | filter: search | itemsPerPage: 20 track by $index">
    <tr ng-show="NormalMode">
        <td>{{student.Student.StudentName}}</td>

        <td>
            <button class="btn btn-primary">Detail</button>
            <button ng-click="updateEvent($index)" class="btn btn-primary">
              Update
            </button>
            <button class="btn btn-primary">Delete</button>
        </td>
    </tr>
    <tr ng-show="EditorMode">
        <td><input type="text" ng-model="student.Student.StudentName"></td>
        <td>
            <button class="btn btn-primary">Save</button>
            <button class="btn btn-primary">Cancel</button>
        </td>
    </tr>

In my AngularJS Controller, i dont know how to write it for true. Can you help me to do this UI? So many thanks!

enter code here

Answer 1

Have the ng-click handler pass the item as an argument instead of $index:

̶<̶t̶b̶o̶d̶y̶ ̶d̶i̶r̶-̶p̶a̶g̶i̶n̶a̶t̶e̶=̶"̶s̶t̶u̶d̶e̶n̶t̶ ̶i̶n̶ ̶C̶l̶a̶s̶s̶S̶t̶u̶d̶e̶n̶t̶s̶ ̶|̶ ̶f̶i̶l̶t̶e̶r̶:̶ ̶s̶e̶a̶r̶c̶h̶ ̶|̶ ̶i̶t̶e̶m̶s̶P̶e̶r̶P̶a̶g̶e̶:̶ ̶2̶0̶ ̶t̶r̶a̶c̶k̶ ̶b̶y̶ ̶$̶i̶n̶d̶e̶x̶"̶>̶
<tbody dir-paginate="student in ClassStudents | filter: search | itemsPerPage: 20">
    <tr ng-show="NormalMode">
        <td>{{student.Student.StudentName}}</td>

        <td>
            <button class="btn btn-primary">Detail</button>
            ̶<̶b̶u̶t̶t̶o̶n̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶u̶p̶d̶a̶t̶e̶E̶v̶e̶n̶t̶(̶$̶i̶n̶d̶e̶x̶)̶"̶ ̶c̶l̶a̶s̶s̶=̶"̶b̶t̶n̶ ̶b̶t̶n̶-̶p̶r̶i̶m̶a̶r̶y̶"̶>̶
            <button ng-click="updateEvent(student)" class="btn btn-primary">
              Update
            </button>
            <button class="btn btn-primary">Delete</button>
        </td>
    </tr>

The filter in the ng-repeat causes $index of the view to differ from the index of the item in the ClassStudents array. Instead, pass the actual item to the updateItem function.

Also it is not wise to use track by $index when the list contains objects filtered from an array. See When not to use 'track by $index' in an AngularJS ng-repeat?.