Angularjs- 添加/删除动态 html 元素(下拉菜单) [英] Angularjs- adding/removing dynamic html elements (dropdown)

问题描述

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

1. 为什么dropdown没有绑定scope.demoDays的天数，总是为空?

2. 这是动态添加 dropdown 的正确方法吗?如果用户添加5个下拉列表，如何得到结果，ng-model="selectedDay"会创建一个选择数组吗?有什么建议吗?

谢谢

var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope, $compile) {无功计数器 = 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){返回 {范围:{demoDisplay:"=",//将引用的模型导入我们的指令范围演示日:"="},链接:函数(范围、元素、属性、ctrl){scope.$watch('demoDisplay', function(){//观察模型何时发生变化elem.html("")//删除所有元素angular.forEach(scope.demoDisplay, function(d){//迭代列表var s = scope.$new();//创建一个新的作用域angular.extend(s,d);//复制数据到它上面控制台日志(范围.演示日)；var template = '<label class="item item-input"><div class="style-select"><select ng-model="selectedDay" ng-options="day 范围内的一天.demoDays"></select><br></div></label>';elem.append($compile(template)(s));//编译模板 &附加});}, true)//深入对象}}})

html

添加字段<div demo-display="fields" demo-days="days"></div>

解决方案

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

templateUrl: 'template.html',

其中 template.html 是:

<div class="style-select"><select ng-model="demoDisplay.selection" ng-options="demoDays 中的一天"></select><br>

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

您可以使用 ng-repeat 中的指令在单击按钮时创建其他字段:

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

这是一个工作 plunker:http://plnkr.co/edit/pOY0l18W7wEbfSU7DKw2?p=preview

here is my code- http://plnkr.co/edit/oTWXbLIKOxoGTd4U0goD?p=preview

1. why is the days dropdown does not data bind with scope.demoDays, it is always empty?

2. is this the correct way to add dropdown dynamically? If user adds 5 dropdown, how to get the results , will ng-model="selectedDay" create an array of selection? any suggestions?

Thank you

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>

解决方案

There is no need for $watch in your link function - you have already established two-way binding by specifying = on your scope property. And you can use a plain template, without having to compile.

templateUrl: 'template.html',

where template.html is:

<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>

Notice that the select is bound to demoDisplay.selection, which will be created on each field and be accessible on the parent scope via two-way binding. Also, note that within ng-options, I changed scope.demoDays to just demoDays. In a directive's template you only need to use the property's name to access a scope value.

You can use the directive inside ng-repeat to create additional fields when the button is clicked:

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

Here is a working plunker: http://plnkr.co/edit/pOY0l18W7wEbfSU7DKw2?p=preview

这篇关于Angularjs- 添加/删除动态 html 元素(下拉菜单)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！