Javascript angularjs将多个输入数据绑定的方法是什么？

我正在学习angularjs，我希望能够让用户输入许多输入。当输入这些输入时，

列表

数组元素应相应更改。我想尝试使用ngRepeat指令，但我读到，由于它创建了一个新的作用域，我无法进行数据绑定：

<div ng-repeat="item in list">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item" type="text"/>
</div>

输入{{$index+1}}：

---

我想知道我是否应该使用自定义指令来实现这一点，或者以不同的方式实现它

如果您的

列表

是一个对象数组（而不是一个原语数组），那么您的运气会更好。即使使用

ng repeat

创建了一个新的作用域，这也可以正常工作：

<div ng-repeat="item in list">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item.value" type="text"/>
</div>

请看一个例子

---

另一方面，如果您试图绑定到字符串数组，新范围将导致问题，因为您正在修改的值将不会绑定到原始数组字符串原语（如示例所示）。

数据绑定到原语“项”的原因不起作用是因为ng repeat为每个项创建子作用域的方式。对于每个项目，ng repeat将新的子范围原型继承自父范围（请参见下图中的虚线），然后将项目的值分配给子范围上的新属性（下图中的红色项目）。新属性的名称是循环变量的名称。从：

如果项是基元，则新的子范围属性本质上被分配了基元值的副本。此子作用域属性对父作用域不可见，您对输入字段所做的更改存储在此子作用域属性中。例如，假设我们在父范围内有

$scope.list = [ 'value 1', 'value 2', 'value 3' ];

在HTML中：

<div ng-repeat="item in list">

由于ng模型数据绑定，对表单输入字段所做的更改存储在该子作用域属性中

您可以通过将子作用域记录到控制台来验证这一点。添加到HTML中，在ng中重复：

<a ng-click="showScope($event)">show scope</a>

---

使用@Gloopy的方法，每个子作用域仍然会获得一个新的“item”属性，但由于列表现在是一个对象数组，

childScope[valueIdent]=value导致项属性的值设置为对其中一个数组对象（而不是副本）的引用


使用showScope（）技术，您将看到子作用域
项
属性的值引用了一个数组对象——它不再是一个基本值

另请参见和

（其中包含使用ng repeat时作用域外观的图片）。
以下是一种方法。我使用了文本区域和与中继器不同的结构，但主要概念是：


显示基于索引的简单值。（不受约束）
关于模糊更新模型
关于模型更新和重新渲染

它本质上是伪造装订

工作小提琴-

html：

  <script type="text/ng-template" id="textareas.html">
    <textarea ng-if="strings" ng-repeat="str in strings" ng-blur="blur( $event, $index )">{{strings[$index]}}</textarea>
  </script>

<div ng-controller="MyCtrl">
    Here's a few strings: <br />
    <div ng-repeat="str in strings">{{strings[$index]}}</div>

    Here's the strings as editable (twice so that you can see the updates from a model change): <br />
    <form-textareas strings="strings"></form-textareas>
    <form-textareas strings="strings"></form-textareas>

</div>

考虑使用
ngList
指令
我发现了一种有趣的方法，它允许我处理一系列原语

我使用的是AngularJS 1.2.1，这是我唯一可以使用的版本

HTML:

链接：
（感谢格洛皮为您准备的首发小提琴）

我相信有一些简单的方法可以在这个过程中找出漏洞，我很想听听。它将允许我支持我的代码。
如果一个输入框可以工作，并且每个项目都由一些分隔符分隔，请参阅ngList。虽然这对于我目前正在开发的东西来说不是直观的，但很高兴知道angular将此功能作为我将来可能使用的指令。谢谢嘿，伙计，你用什么软件绘制了上面的图表？@abbood。
item: "value 1"

<a ng-click="showScope($event)">show scope</a>

$scope.showScope = function(e) {
    console.log(angular.element(e.srcElement).scope());
}

  <script type="text/ng-template" id="textareas.html">
    <textarea ng-if="strings" ng-repeat="str in strings" ng-blur="blur( $event, $index )">{{strings[$index]}}</textarea>
  </script>

<div ng-controller="MyCtrl">
    Here's a few strings: <br />
    <div ng-repeat="str in strings">{{strings[$index]}}</div>

    Here's the strings as editable (twice so that you can see the updates from a model change): <br />
    <form-textareas strings="strings"></form-textareas>
    <form-textareas strings="strings"></form-textareas>

</div>

var myApp = angular.module('myApp',[]);
angular.module('myApp', [])
  .controller('MyCtrl', ['$scope', function($scope) {
    $scope.strings = [ "foo", "bar", "cow" ];
   }])
  .directive('formTextareas', function() {
    return {
        restrict: "E",
        scope: {
            strings: '='
        },
        templateUrl: "textareas.html",
        link: function( $scope ){
            $scope.blur = function( $event, $index ){
                $scope.strings[ $index ] = $event.currentTarget.value;
            };
        }
    };
  })
;

<div ng-repeat="item in list">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item" type="text" ng-blur="editItem($index, item)"/>
</div>

$scope.editItem = function(idx, eItem) {
    $scope.list[idx] = eItem;
};