Я новичок в 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];
}
Любые советы оценены!