У меня есть следующий код (я не мог поместить весь код здесь, поскольку он довольно большой, поэтому я извлек только то, что подходит для этого вопроса).
Я могу добавлять элементы (через отдельную форму, которую я где-то еще называю addItem()
на ng-submit
) и перечислить их на странице. Когда я нажимаю кнопку "Редактировать", рядом с каждым элементом, открывается модальная панель с информацией о текущем элементе. Но по мере изменения значений они автоматически обновляются в области $ из-за двусторонней привязки данных.
То, что я пытаюсь достичь, заключается в том, что текущий элемент и область $ обновляются только после отправки формы (нажав кнопку отправки), таким образом я также могу нажать кнопку "Отмена" и прервать операцию. Я угадываю какую-то функцию Update
, но не уверен, что добавить туда.
Кроме того, я повторяю один модальный для каждого элемента в элементах, но я не думаю, что это лучшая практика. Любое предложение о том, как оптимизировать это, приветствуется.
Третья часть моего вопроса: как показать элемент ng-model item.color как "выбранный" из списка параметров, когда модальные нагрузки?
JS
$scope.colors = [
"blue",
"green",
"red"
];
$scope.items = [
{
name: "apple",
color: "red"
},
{
name: "pear",
color: "green"
}
];
$scope.addItem = function (itemName,itemColor) {
$scope.items.push({
name: itemName,
color: itemColor
});
};
$scope.editItem = function () {
???
};
HTML
<ul>
<li ng-repeat="item in items">
<span>{{$index}} - {{item.name}} - {{item.color}}</span>
<button data-toggle="modal" data-target="#itemEditModal{{$index}}">
Edit
</button>
</li>
</ul>
<div class="modal fade" ng-repeat="item in items" id="itemEditModal{{$index}}">
<div class="modal-dialog">
<form ng-submit="editItem(item)">
<div class="modal-content">
<div class="modal-body">
<div class="form-group">
<label>Name</label>
<select class="form-control" ng-model="item.color" ng-options="color in colors">
</select>
</div>
<div class="form-group">
<label>Name</label>
<input type="text" ng-model="item.name">
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal">Cancel</button>
<button type="submit">Save changes</button>
</div>
</div>
</form>
</div>
</div>
Я начну со второго пункта вашего вопроса, который создает отдельный модальный для каждого элемента. Да, это плохая практика, просто введите себе, имея большое количество предметов. Слишком много чего-то нехорошо.
Вернемся к первой части, что бы я сделал:
Когда вы нажимаете кнопку редактирования, добавьте логику, которая сохраняет выбранный элемент во временной переменной переменной $ scope и привязывает его к модальному. Вы знаете, как выбранный элемент для редактирования. Очистите эту переменную при отправке формы и при закрытии модального.
Внесите необходимые изменения и нажмите "Отправить". Здесь вы можете сделать либо цикл в массиве items, когда индексированный элемент совпадает с идентификатором во временной переменной области, замените его значения на обновленную временную область. Это покажет обновленный элемент в ретрансляторе.
Не могли бы вы рассказать о третьей части вашего вопроса, поскольку я не понял, что вам нужно. Вы подразумеваете что-то, связанное с css?
ng-model
angular-ui-bootstrap
. Решает большинство ваших вопросов и не требует особых изменений разметки. В противном случае вам нужно будет самостоятельно написать директивы для реализации различных компонентов bootstrap.js