Как я могу изменить строку в таблице после NG-повтора с фильтром

Question

Я делаю пользовательский интерфейс как Excel. Но у меня большие проблемы.

Мне нужно, когда я нажимаю кнопку update, и только ЭТА строка в шаблоне изменения таблицы для редактирования (например,

на ...). Но я не могу этого сделать. Тайский мой путь:

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

В моем контроллере AngularJS я не знаю, как написать его для истины. Можете ли вы помочь мне сделать этот интерфейс? Огромное спасибо!

enter code here

Answer 1

Обработчик ng-click передает элемент в качестве аргумента вместо $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>

Фильтр в ng-repeat заставляет $index вида отличаться от индекса элемента в массиве ClassStudents. Вместо этого передайте фактический элемент в функцию updateItem.

Также нецелесообразно использовать track by $index, когда список содержит объекты, отфильтрованные из массива. См. Когда не следует использовать 'track by $ index' в AngularJS ng-repeat? .