Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何动态添加输入行以查看和维护angularjs ng模型中作为数组项的值_Angularjs_Angularjs Ng Repeat_Angular Ngmodel - Fatal编程技术网

如何动态添加输入行以查看和维护angularjs ng模型中作为数组项的值

如何动态添加输入行以查看和维护angularjs ng模型中作为数组项的值,angularjs,angularjs-ng-repeat,angular-ngmodel,Angularjs,Angularjs Ng Repeat,Angular Ngmodel,我希望用户在输入新项目时动态添加行。如下所示,用户单击“添加输入项”按钮,并添加一个新的输入元素,用户可以在其中添加文本 我试图将每个输入元素值与app.js中的模型$scope.items(一个数组)相关联。在我的index.html中,我使用ng repeat加载$scope.items。 我不明白的是如何让每个输入/行自动添加到定义为$scope.items的模型并由其管理 是否可以将每个输入元素映射到与项数组相关的ng模型,如果可以,如何映射?或者,在这种情况下应该使用指令吗 完整的代

我希望用户在输入新项目时动态添加
行。如下所示,用户单击“添加输入项”按钮,并添加一个新的输入元素,用户可以在其中添加文本

我试图将每个输入元素值与
app.js
中的模型
$scope.items
(一个数组)相关联。在我的
index.html
中,我使用
ng repeat
加载
$scope.items
。 我不明白的是如何让每个输入/行自动添加到定义为
$scope.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>

这当然是可能的,请查看此更新

我将您的数组更新为具有
text
属性的对象数组(不是字符串),并将您的输入更改为:

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

这当然是可能的,请查看此更新的

我将您的数组更新为具有
text
属性的对象数组(不是字符串),并将您的输入更改为:

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

这当然是可能的,请查看此更新的

我将您的数组更新为具有
text
属性的对象数组(不是字符串),并将您的输入更改为:

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

这当然是可能的,请查看此更新的

我将您的数组更新为具有
text
属性的对象数组(不是字符串),并将您的输入更改为:

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

第一个问题是输入框上的绑定。由于输入框周围有
ng repeat
,每个输入框都有一个可绑定的
值,这就是您的
ng模型
应该是的。您不应该为
属性分配任何内容

$scope.items = [
  {value:'First Item'},
  {value: 'Second Item'}
];
然后,您可以像这样绑定文本框:



下面是一个演示其工作原理的示例。

第一个问题是输入框上的绑定。由于输入框周围有
ng repeat
,每个输入框都有一个可绑定的
值,这就是您的
ng模型
应该是的。您不应该为
属性分配任何内容

$scope.items = [
  {value:'First Item'},
  {value: 'Second Item'}
];
然后,您可以像这样绑定文本框:



下面是一个演示其工作原理的示例。

第一个问题是输入框上的绑定。由于输入框周围有
ng repeat
,每个输入框都有一个可绑定的
值,这就是您的
ng模型
应该是的。您不应该为
属性分配任何内容

$scope.items = [
  {value:'First Item'},
  {value: 'Second Item'}
];
然后,您可以像这样绑定文本框:



下面是一个演示其工作原理的示例。

第一个问题是输入框上的绑定。由于输入框周围有
ng repeat
,每个输入框都有一个可绑定的
值,这就是您的
ng模型
应该是的。您不应该为
属性分配任何内容

$scope.items = [
  {value:'First Item'},
  {value: 'Second Item'}
];
然后,您可以像这样绑定文本框:


这里有一个演示它是如何工作的