输入文本的 ng-repeat 未在指令中填充 ng-model答案

【问题标题】：ng-repeat of input text not populating ng-model in directive输入文本的 ng-repeat 未在指令中填充 ng-model
【发布时间】：2016-04-06 03:10:31
【问题描述】：

Angular 的新手，我有一个 ng-repeat，它显示多个输入框，每个输入框都应该有自己的 ng-model 名称，但是 ng-repeat 不会使用名称填充 ng-model，如果我尝试围绕它构建观察者 {{ }}（即 ng-model="{{data.id}}

我的 app.js：

angular.module('app', [])
      .controller('ExampleController', ['$scope', function($scope) {
        $scope.data = {
         dataSet: null,
           inputs: [
           {id: 'data1', name: 'Option A', type:'input', preFill:"no.A"},
           {id: 'data2', name: 'Option B', type:'input', preFill:"no.B"},
           {id: 'data3', name: 'Option C', type:'input', preFill:"no.C"}
          ],
       };
     }]).directive('formPanel', function() { 
          return {
             restrict: 'E',
             scope: {
                 info: '='
             },
             template: '<div ng-controller="ExampleController"><form name="myForm">'+
             '<label for="{{option.name}}" ng-repeat="option in data.inputs"><br />'+
             'Input {{option.name}}:'+
             '<input ng-model="option.id" id="{{option.id}}" name="{{option.name}}" '+
             'type="{{option.type}}" class="form-control">'+
             ' </label></form><hr>'+
             '<span>data: = {{ data1}} , {{data2}}, {{data3}}.</span><br/>'+
             '</div>' };
   });
})

和html：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="app.js"></script>

</head>
<body ng-app="app" >
<form-panel info="data"></form-panel>
</body>
</html>

我在这个 Plunker 中试过：Plunker Link

如您所见，ng-model 未绑定（？），可能出于同样的原因，$scope 名称作为数据出现在输入中，而不是作为要绑定的数据的名称到。

即应该读为 ng-model="data1"，但改为读为 ng-model="option.id"

【问题讨论】：

只是为了澄清，在模板中使用ng-Controller只是为了更容易在这里发布，而不是几个文件。预期的输出是data = no.A, no.B, no.C，其中数据来自3个输入框。
所以，在阅读了有关 track by、$compile、$link.. 之后似乎都没有直接解决我的问题，但表明我只是不理解它.. 我不得不手动写出“
.. 全部 300 多个.. 以便能够访问每个输入字段以查看数据.. FML。

标签： javascript angularjs input ng-repeat angularjs-ng-model

【解决方案1】：

首先，您应该将控制器附加到应用程序，只是声明它不会这样做。

您可以通过添加属性 ng-controller="ExpampleController" 或将控制器添加到指令中来做到这一点：

restrict: 'E',
controller: 'ExampleController'
template:...

但是如果你将它添加到指令中，你只需要放置元素 <form-panel> 并且你不必传递任何信息。

此外，您不能插入 ng-model="{{someData}}" 因为表达式已经在没有花括号的情况下进行了评估

【讨论】：

我不明白您认为控制器尚未附加，您是说将其放入模板中的语法错误吗？当我把它放在html外面时，它根本不起作用。当我按照您的建议将其放入指令时，它完全停止工作。所以这是一个失败。真正的问题是你在最后一句话中所说的，ng-model 需要是 $scope 的名称，所以我将它作为“option.id”传递，但它不是作为什么 IN option.id 到达的，但是作为字符串“option.id”
你说的“一起停止工作”是什么意思？出现什么错误？
抱歉 Kobi 耽搁了。我编辑了 plunker，它停止了，但没有看到我的 plunker 是从另一个页面编辑的。将控制器从模板移动到指令不会发生任何变化，因此它不是我要寻找的答案。

【解决方案2】：

请检查下面的 HTML 代码：

<div>
  <form name="myForm">
    <label for="{{option.name}}" ng-repeat="option in data.inputs"><br /> 
      Input {{option.name}}:
      <input ng-model="option.id" id="{{option.id}}" name="{{option.name}}"
        type="{{option.type}}" class="form-control"
        placeholder="{{ option.preFill }}">
    </label>
  </form>
  <hr>
 <tt>data: = {{ data.inputs[0].id }} , {{data.inputs[1].id}}, {{data.inputs[2].id}}.</tt><br/>
</div>

已修改代码，可在Plunker link找到

【讨论】：

我检查了.. 但你什么也没做，data: = {{ data1}} , {{data2}}, {{data3}} 中的数据字段。
你现在可以检查一下吗？我没有保存 plunker html。
啊，我知道你做了什么，虽然它是一个很好的解决方法，但关键是访问 $scope.data1 作为它的数据名称。我可以使用你给我的东西，我应该把它标记为答案吗？更正确的答案是使用 $scope.data1 作为传入和传出数据的位置。如果我不打算使用双向绑定，也可以使用 document.getElementById('data1') 。更不用说寻找 data.inputs[0].id
所以，我尝试使用你给我的东西，尝试访问 data1.. 没有成功.. 我似乎通过在它周围创建一个表单元素来访问它，Angular 存储表单数据，所以那种工作.. plnkr.co/edit/qXupu4I4vWzMO7Sny02l?p=preview 但现在我只需要“获取”所有表单数据并将它们放入数据位置 data1、data2 等。而不是让它们直接进入 a.k.a. 2-way binding。跨度>