Question

这是我的代码 - http://plnkr.co/edit/oTWXbLIKOxoGTd4U0goD?p=preview

为什么天dropdown没有数据与scope.demoDays绑定，它总是为空？
这是动态添加dropdown的正确方法吗？如果用户添加5个下拉列表，如何获得结果，ng-model="selectedDay"将创建一个选择数组？有什么建议吗？

谢谢

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $compile) {

  var counter = 0;
  $scope.fields = [];

  $scope.days =['Day','Sun','Mon','Tue','Wed','Thu','Fri','Sat'];

    $scope.addField = function() {          
     $scope.fields.push({name:"test " + counter++});
    };
});



app.directive('demoDisplay', function($compile){
    return {
    scope:{
        demoDisplay:"=", //import referenced model to our directives scope
        demoDays:"="
      },
     link:function (scope, elem, attr, ctrl) 
      {
        scope.$watch('demoDisplay', function(){ // watch for when model changes

          elem.html("") //remove all elements

          angular.forEach(scope.demoDisplay, function(d){ //iterate list
              var s = scope.$new(); //create a new scope
              angular.extend(s,d); //copy data onto it
              console.log(scope.demoDays);

              var template = '<label class="item item-input"><div class="style-select"><select ng-model="selectedDay" ng-options="day for day in scope.demoDays"></select><br></div></label>';
              elem.append($compile(template)(s)); // compile template & append
          });
        }, true) //look deep into object
      }
    }
})

HTML

<button ng-click="addField()">Add Field</button>

<div demo-display="fields" demo-days="days"></div>

Answer 1

您的链接函数中不需要$watch - 您已经通过在scope属性上指定=来建立双向绑定。您可以使用普通模板，而无需编译。

templateUrl: 'template.html',

其中template.html是：

<label class="item item-input">
  <div class="style-select">
    <select ng-model="demoDisplay.selection" ng-options="day for day in demoDays"></select>
    <br>
  </div>
</label>

请注意，select绑定到demoDisplay.selection，它将在每个字段上创建，并可通过双向绑定在父作用域上访问。另请注意，在ng-options内，我将scope.demoDays更改为demoDays。在指令的模板中，您只需使用属性的名称来访问范围值。

单击按钮时，您可以使用ng-repeat内的指令创建其他字段：

<div ng-repeat="field in data.fields">
  <div demo-display="field" demo-days="days"></div>
</div>

这是一个工作的掠夺者：http://plnkr.co/edit/pOY0l18W7wEbfSU7DKw2?p=preview

Answer 2

任何简单的方法都可以让它发挥作用。

在var template scope.demoDays demoDays。

只需将其更改为{{1}}即可。您已经在此范围内，因此再次使用它是没有必要的。

Angularjs-添加/删除动态html元素（下拉列表）

2 个答案: