Angular. Как реализовать ng-show, ng-hide в определенной итерации?

Question

[rtplv]

Я новичок в Angular, поэтому особо тапками не кидайтесь.
Суть следующая. Есть список адресов. При нажатии на одну из строк, нужно спрятать ячейки с инфой и вывести input для редактирования. Всё работает, но только срабатывает на все строки стразу, а нужно на одну.

<table class="table table-striped col-md-6">
        <tr>
          <th class="col-md-5">Полный адрес</th>
          <th class="col-md-3">Координаты</th>
          <th class="col-md-4">Комментарий</th>
          <th></th>
        </tr>
        <tr ng-repeat="data in addressList"  ng-click="addressEditor()" ng-hide="editorEnabled">
          <td>{{data.address}}</td>
          <td>{{data.latitude}} / {{data.longitude}}</td>
          <td>{{data.description}}</td>
          <td class="col-sm-2"><button class="btn btn-danger" ng-click="removeAddress(data)"><span class="glyphicon glyphicon-trash"></span></button></td>
          </tr>
        <tr ng-repeat="item in addressList" ng-show="editorEnabled">
          <td><input type="text" ng-model="item.address"></td>
          <td><input type="text" ng-model="item.latitude"><input  type="text" ng-model="item.longitude"></td>
          <td><input type="text" ng-model="item.description"></td>
          <td><button class="btn btn-success" ng-click="close()">Сохранить</button><button class="btn btn-danger" ng-click="close()">Отмена</button></td>
        </tr>
      </table>

И код JS:

$scope.editorEnabled = false;

         $scope.addressEditor = function() {
           $scope.editorEnabled = true;
         };

         $scope.close = function () {
           $scope.editorEnabled = false;
         };

Как применить ng-hide и ng-show только на одну строку? Вроде как через id. Если можно покажите на примере.

Answer 1

[Дмитрий Лузанов]

<table class="table table-striped col-md-6">
    <tr>
        <th class="col-md-5">Полный адрес</th>
        <th class="col-md-3">Координаты</th>
        <th class="col-md-4">Комментарий</th>
        <th></th>
    </tr>
    <tr
    ng-init="data.edit = false"
    ng-repeat="data in addressList"
    ng-click="data.edit = !data.edit"
    ng-hide="data.edit">
        <td>{{data.address}}</td>
        <td>{{data.latitude}} / {{data.longitude}}</td>
        <td>{{data.description}}</td>
        <td class="col-sm-2">
            <button class="btn btn-danger" ng-click="removeAddress(data)">
                <span class="glyphicon glyphicon-trash"></span>
            </button>
        </td>
    </tr>
    <tr ng-repeat="item in addressList" ng-show="item.edit">
        <td><input type="text" ng-model="item.address"></td>
        <td><input type="text" ng-model="item.latitude"><input type="text" ng-model="item.longitude"></td>
        <td><input type="text" ng-model="item.description"></td>
        <td><button class="btn btn-success" ng-click="close()">Сохранить</button><button class="btn btn-danger" ng-click="close()">Отмена</button></td>
    </tr>
</table>

Comments

[rtplv]

Спасибо. И ещё уточнить хотелось бы. Почему после клика на строку и открытия input'ов редактирования строка "падает" в конец списка?

[rtplv]

Всё. Разобрался.