Если у нас есть список вроде:
<li id="element1">one</li>
<li id="element2">two</li>
<li id="element3">three</li>
и поле редактирования:
<div id="editbox">
<input id="newName" type="text" value="">
<input type="button" value="apply" ng-click="changeName()">
</div>
Я хотел бы сделать это, когда вы нажимаете один элемент из списка, например, если я нажимаю в элементе1, как я могу сделать, что вход (поле) появляется только на уровне элемента element1 с использованием углового?
Список динамический, и я не уверен, могу ли я использовать как цель, где я могу связать идентификатор элемента, в котором я нажал.
Я пытался, но я не могу это получить.
Спасибо вам за помощь.
Вы можете сделать это с помощью ng-show (этот переключатель переключается):
<div ng-app="myApp" ng-controller="dummy">
<ul>
<li ng-repeat="thing in stuff">
<span id="{{thing.id}}" ng-click="showThing = !showThing">{{thing.name}}</span>
<input type="text" ng-model="thing.name" ng-show="showThing">
</li>
</ul>
</div>
angular.module('myApp', [])
.controller('dummy', ['$scope', function ($scope) {
$scope.stuff = [
{id: 1, name: 'node1'},
{id: 2, name: 'node2'},
{id: 3, name: 'node3'},
{id: 4, name: 'node4'},
{id: 5, name: 'node6'},
{id: 6, name: 'node6'},
{id: 7, name: 'node7'},
{id: 8, name: 'node8'},
{id: 9, name: 'node9'},
{id: 10, name: 'node10'},
];
$scope.selected = false;
}]);
Некоторые различные варианты/примеры:
Мне было скучно, поэтому я сделал еще один: FIDDLE
Чтобы получить работу objthis, вам нужно использовать синтаксис controllerAs, ознакомьтесь с документами здесь для получения дополнительной информации.
Для вашей скрипки вы можете посмотреть изменения, которые я сделал, чтобы заставить их работать: Обновленный Fiddle
Сначала вам нужно было сделать копию объекта, который вы редактируете, чтобы вы не сразу меняли фактический объект. Таким образом, когда вы отмените, он вернется туда, где он был раньше.
$scope.openEditBox = function(nodeSelected) {
objthis.currentNodeSelected = nodeSelected;
objthis.currentEdit = angular.copy(objthis.currentNodeSelected);
$scope.showThing = true;
};
следующая вещь заключалась в том, чтобы добавить objthis.currentEdit в качестве ng-модели в поле редактирования:
<input type="text" ng-model="d.currentEdit.name" ng-show="showThing">
Затем, когда вы его сохраняете, вы получаете:
$scope.changeName = function() {
objthis.currentNodeSelected.name = objthis.currentEdit.name;
console.log($scope.name);
console.log(objthis.currentNodeSelected);
};
Вы можете использовать ng-show
:
HTML:
<li id="element1"><a href="#" ng-click="selected = 1">one</a> <input id="box" type="text" value="" ng-show="selected === 1"></li>
JS:
angular.module('myApp', [])
.controller('dummy', ['$scope', function ($scope) {
$scope.selected = false;
}]);