输入文本的ng重复没有填充指令中的ng模型

ng-repeat of input text not populating ng-model in directive

本文关键字：ng 填充 指令 模型 文本 输入      更新时间：2024-02-10

Angular很新，我有一个ng repeat，它显示了几个输入框，每个输入框都应该有自己的ng模型名称，但ng repeat没有用名称填充ng模型，如果我试图围绕它构建观察程序｛｛｝｝，则会崩溃（即，ng model="｛｛data.id｝"

我的应用程序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链接

因此，正如您所看到的，ng模型没有绑定（？），可能出于同样的原因，$scope名称在输入中显示为数据，而不是要绑定到的数据的名称。

即，应读取ng model="data1"，但应读取为ng model="option.id"

首先，您应该将控制器连接到应用程序，只是声明它不会起作用。

您可以通过添加属性ng-controller="ExpampleController"或将控制器添加到指令中来完成此操作：

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

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

此外，您不能对ng model="｛｛someData｝｝"进行插值，因为表达式已经在没有大括号的情况下进行了求值

请检查下面的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链接中找到它

相关文章：