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

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

Source: AngularJS

Related Post