0

我有一种情况，我希望用户<input>在想要输入新项目时动态添加行。如下图所示，用户点击“添加输入项”按钮，一个新的输入元素被添加到用户可以添加文本的地方。

在此处输入图像描述

我正在尝试将每个输入元素值$scope.items与app.js. 在index.html我$scope.items的ng-repeat. 我不明白的是如何让每个输入/行自动添加到定义为$scope.items.

是否可以将每个输入元素映射到与items数组相关的 ng 模型，如果可以，如何映射？或者，在这种情况下应该使用指令吗？

完整的代码和运行时在Plunker 上（以便您可以查看奇怪的输出）。

片段来自index.html：

<body ng-controller="MainCtrl">
  <button ng-click="addInputItem()">+ Add Input Item</button>
  <div ng-repeat="item in items">
    <input ng-model="items" type="text" value="{{item}}" size="40">
  </div>
  <pre>items = {{items | json}}</pre>
</body>

app.js代码：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = ['First Item', 'Second Item'];
  $scope.addInputItem = function() {
    $scope.items.push('');
  };
});
4

2 回答 2

2

第一个问题是输入框的绑定。由于ng-repeat输入框周围，每个输入框都有一个item可以绑定的值，这就是你ng-model应该的。您不应该为该value属性分配任何内容。

<input ng-model="item.value" type="text"  size="40">

进行该更改至少会使输入框显示项目。但是在框中键入不会更新底层数组。这是第二个问题。

该指令原型从您的控制器继承范围（在此处ng-repeat阅读有关范围的更多信息）。由于您的项目是原始字符串，因此您的元素有效地从控制器获取数据的副本，并且在框中键入会更新这些副本，而不是控制器中的实际数据。ng-repeat

要解决此问题，只需将您的项目设为对象数组而不是字符串数组。

$scope.items = [
  {value:'First Item'},
  {value: 'Second Item'}
];

然后你会像这样绑定你的文本框：

<input ng-model="item.value" type="text"  size="40">

这是一个Plunker展示它是如何工作的。

于 2014-06-02T02:39:44.097 回答
1

这当然是可能的，看看这个更新的 plnkr

我将您的数组更新为具有属性的对象数组（不是字符串），text并将您的输入更改为：

<input ng-model="item.text" type="text" size="40">
于 2014-06-02T02:38:32.280 回答