Отслеживание текущего выбранного элемента с помощью AngularJS

Я новичок в AngularJS и не могу найти подходящего ответа для этого. В настоящее время мое приложение состоит из списка элементов, отображаемых через Angular. Существует также метка, которая отображает имя текущего выбранного элемента, и поле ввода, которое позволяет изменять имя выбранного элемента.

Я не могу понять, как одновременно:

  • Разрешить выбор элемента, который запускает обновление метки и текста окна ввода, чтобы отображать имя вновь выбранного элемента
  • Разрешить редактирование имени в поле ввода, которое запускает обновление метки, отображающей текущее отображаемое имя элемента
  • Редактирование имени должно быть отражено в исходном элементе модели

В настоящий момент я пытаюсь отслеживать, какой элемент является текущим через флаг против элемента, и это не делает то, что я хочу. В идеале я бы заменил currentItem на приведенную ниже прямую ссылку на элемент в items на isCurrent=true.

Метка названия текущего элемента:

`<div id="CurrentItem" data-ng-model="currentItem">{{currentItem.name}}</div>`

Поле ввода имени текущего элемента:

`<input id="ItemName" type="text" data-ng-model="currentItem" value="{{currentItem.name}}" />`

Показать все элементы:

<div data-ng-repeat="item in items" data-ng-click="changeItem(item)">`
    <img src="images/ItemIcon.png">
<div>{{item.name}}</div>

Контроллер:

var CoreAppController = function($scope, $location) {
   $scope.changeItem = function(item) {
        var length = $scope.items.length;
        while(length-- ) {
            $scope.items[length].isCurrent = false;
        }
        $scope.currentItem = item;
        $scope.items.indexOf(item).isCurrent = false;
    }

    $scope.createItem = function(name, layout) {
        $scope.items.push({ id: $scope.items.length + 1,
                            name: name,
                            isCurrent: false
        });
    }

    // Initialisation
    $scope.items = [];
    $scope.createItem("Item 1");
    $scope.createItem("Item 2");

    $scope.items[0].isCurrent = true;
    $scope.currentItem = $scope.items[0];

}

Любые советы оценены!

Ответы

Ответ 1

Я не уверен в вашем текущем коде, но вот макет, который делает то, что кажется вам запрашивающим.

JS

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    { name: 'foo' },
    { name: 'bar' },
    { name: 'test' }
    ];
    $scope.editing = null;
    $scope.editItem = function(item) {
      $scope.editing = item;
    }
});

и разметка

  <body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="item in items">
        {{item.name}}
        <a ng-click="editItem(item);">edit</a>
      </li>
    </ul>
    <div ng-show="editing">
       <input type="text" ng-model="editing.name"/>
       <span>{{editing.name}}</span>
    </div>
  </body>

Надеюсь, это поможет. Если вам нужно больше описания, дайте мне знать.