如何使用 Angular JS 将文本添加到带有输入字段的文本框中并从文本框中删除它？

Question

我创建了两个表单。第一个是我可以将许多类型的项目提交到一个数组中，以便在第二种形式的文本框中显示。第二种形式的文本框应显示数组中的项目，因为新项目是从第一种形式添加的。我希望能够删除文本框中的项目并让它在保存之前从数组中删除项目。我还想从数组中选择一个项目作为主名称。我在第二个表单中设置了一个输入框，用于选择主要名称。

下面的代码有几个问题： 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 = "";
            }
          };

Answer 1

所以这是你的问题的答案See here