Как сделать так, чтобы поле редактирования отображалось в позиции элемента, нажатой с угловым

0

Если у нас есть список вроде:

<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 с использованием углового?

Список динамический, и я не уверен, могу ли я использовать как цель, где я могу связать идентификатор элемента, в котором я нажал.

Я пытался, но я не могу это получить.

Спасибо вам за помощь.

  • 0
    Является ли список динамическим или статическим ??
  • 0
    Список является динамическим, и мы должны использовать только одно поле редактирования.
Теги:

2 ответа

0
Лучший ответ

Вы можете сделать это с помощью 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);
    };
  • 0
    Спасибо, Tj Gienger, но представьте, что у нас есть древовидное представление с узлами (может быть представлено как список) с разными идентификаторами для каждого узла. Тогда при нажатии на узел должно появиться окно редактирования для переименования имени узла. Внутри поля редактирования у нас есть вход для записи нового имени узла и кнопка для применения действия, поэтому измените текущее имя на новое. Вы знаете, как я могу сделать это с помощью угловых? Я не знаю, смогу ли я использовать цель, где значение цели должно быть идентификатором узла, по которому вы щелкаете. Большое спасибо за пример на jsfiddle.
  • 0
    что насчет каждого "узла" уникально? Что бы это ни было, если вы можете отобразить его, вы можете добавить его к любой части элемента. Дайте мне пример того, как выглядит каждый узел, и я обновлю свою скрипку
Показать ещё 10 комментариев
0

Вы можете использовать ng-show:

JSFiddle

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;
}]);
  • 0
    Спасибо, Микелем, но представьте, что у нас есть древовидное представление с узлами (может быть представлено как список) с разными идентификаторами для каждого узла. Тогда при нажатии на узел должно появиться окно редактирования для переименования имени узла. Внутри поля редактирования у нас есть вход для записи нового имени узла и кнопка для применения действия, поэтому измените текущее имя на новое. Вы знаете, как я могу сделать это с помощью угловых? Я не знаю, смогу ли я использовать цель, где значение цели должно быть идентификатором узла, по которому вы щелкаете. Огромное спасибо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню