Я создал две формы. Во-первых, я могу отправить несколько типизированных элементов в массив для отображения в текстовом поле во второй форме. Текстовое поле во второй форме должно отображать элементы в массиве, поскольку новые элементы добавляются из первой формы. Я хочу иметь возможность удалять элементы в текстовом поле и удалять элементы из массива перед сохранением. Я также хочу выбрать один элемент из массива в качестве первичного имени. У меня есть поле ввода во второй форме, настроенной для выбора первичного имени.
В приведенном ниже коде есть несколько проблем: 1) Текстовое поле не добавляет новые элементы, поскольку они либо набраны, либо отправлены из первой формы. 2) Если я помещаю информацию в свой хранилище данных, она появится в моем текстовом поле, так как я установил ее как редактируемую форму, но когда я удаляю информацию из текстового поля, она не удаляет ее из моего массива (по крайней мере, из того, что я могу сказать). 3) Выбор первичного имени работает несколько, но он глючит и, кажется, работает ровно каждый раз, когда я пытаюсь изменить значение в нем.
У меня создалось впечатление, что ng-bind (или, возможно, ng-list?) Будет координировать данные в DOM с изменениями в модели. Где я иду не так? Я просмотрел несколько ссылок по этому вопросу, которые были несколько полезны, но я не могу полностью применить их к задаче:
https://docs.angularjs.org/api/ng/directive/ngBind
https://docs.angularjs.org/api/ng/directive/ngList
http://codepen.io/NicholasMurray/pen/ogmLyy
http://stackoverflow.com/questions/16125872/why-ng-bind-is-better-than-in-angular
Мой HTML:
<form class="first-signup-inner-form" ng-submit="submit()">
<input list="names" ng-model="aliases" type="text" placeholder="Names">
<input type="submit" value="Submit">
</form>
<form class="first-signup-inner-form" editable-form name="editableForm">
<textarea class="w-input alias-text-field" id="Aliases" placeholder="All Names" name="Aliases" ng-bind="list"></textarea>
<input class="w-input business-name-text-field" list="aliases" ng-model="user.Name" id="Business-Name" type="text" placeholder="Official Name" name="Business-Name" required="required">
<datalist id="aliases"><option data-ng-repeat="alias in list" value="{{alias}}"></datalist>
</form>
JS:
$scope.list = [];
$scope.aliases = "";
$scope.submit = function(){
if ($scope.aliases){
$scope.list.push(this.aliases);
$scope.aliases = "";
}
};
Итак, это ответ на ваш вопрос .