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

如何使用输入字段向文本框添加文本并使用Angular JS从文本框中删除它？

1 个答案: