Question

非常新的Angular，我有一个ng-repeat，显示了severl输入框，每个都应该有自己的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”

Answer 1

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

您可以通过添加属性ng-controller =“ExpampleController”或将控制器添加到指令来执行此操作：

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

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

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

Answer 2

请检查以下HTML代码：

event  cust
et1  satya
et1  satya

修改了代码，您可以在Plunker link

中找到它

ng-repeat输入文本未在指令

2 个答案: