Angularjs-添加/删除动态HTML元素（下拉列表） [英] Angularjs- adding/removing dynamic html elements (dropdown)

问题描述

这是我的code-
http://plnkr.co/edit/oTWXbLIKOxoGTd4U0goD?p=$p$pview

1. 为什么是天下拉菜单不 scope.demoDays 数据绑定，它始终是空的




2. 这是添加的正确方法下拉菜单动态？如果用户增加了5下拉列表中，如何获得结果，将<​​code> NG-模式=selectedDay选择创建一个数组？有什么建议？

感谢您

  VAR应用= angular.module（'plunker'，[]）;app.controller（'MainCtrl'，函数（$范围，$编译）{  变种计数器= 0;
  $ scope.fields = [];  $ scope.days = ['日'，'太阳'，'星期一'，'星期二'，'星期三'，'星期四'，'星期五'，'星期六'];    $ scope.addField =功能（）{
     $ scope.fields.push（{名称：测试+专柜+}）;
    };
}）;app.directive（'demoDisplay'，函数（$编译）{
    返回{
    范围：{
        demoDisplay：=，//进口参考模型给我们的指示范围
        demoDays：=
      }，
     链接：功能（范围，ELEM，ATTR，CTRL）
      {
        范围。$腕表（'demoDisplay'，函数（）{//观看时模型更改          elem.html（）//删除所有元素          angular.forEach（scope.demoDisplay，功能（D）{//迭代列表
              变种S = $范围新的（）。 //创建一个新的作用域
              angular.extend（S，D）; //数据复制到它
              的console.log（scope.demoDays）;              VAR模板='＆LT;标签类=逐项输入＆GT;＆LT; D​​IV CLASS =风格选择＆GT;＆LT;选择NG模型=selectedDayNG选项=一天一天的范围。 demoDays＆GT;＆LT; /选择＆GT;＆LT; BR＆GT;＆LT; / DIV＆GT;＆LT; /标签＆gt;，
              elem.append（$编译（模板）（S））; //编译模板和放大器;附加
          }）;
        }，真）//深层考虑对象
      }
    }
}）
 

HTML

 ＆LT;按钮NG点击=激活addField（）＆gt;添加场及LT; /按钮＆GT;＆LT; D​​IV的演示显示=田示范天=天＆GT;＆LT; / DIV＆GT;
 

解决方案

有没有必要 $观看在您的链接功能 - 你已经建立了双向绑定通过指定 = 您scope属性。你也可以使用一个简单的模板，而不必编译。

  templateUrl：template.html'，
 

其中， template.html 是：

 ＆LT;标签类=逐项输入＆GT;
  ＆LT; D​​IV CLASS =风格选择＆GT;
    ＆LT;选择NG模型=demoDisplay.selectionNG选项=一天一天demoDays＆GT;＆LT; /选择＆GT;
    ＆LT; BR＆GT;
  ＆LT; / DIV＆GT;
＆LT; /标签＆gt;
 

请注意，选择绑定到 demoDisplay.selection ，这将在每个字段创建，并通过双向绑定是父范围访问。另外请注意，在 NG-选项，我改变了 scope.demoDays 只是 demoDays 。在指令中的模板，你只需要使用属性的名称来访问一个范围值。

您可以使用里面的指令 NG-重复按钮被点击时创建其他字段：

 ＆LT; D​​IV NG重复=，在data.fields场＆GT;
  ＆LT; D​​IV的演示显示=现场演示天=天＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

下面是一个工作plunker：<一href=\"http://plnkr.co/edit/pOY0l18W7wEbfSU7DKw2?p=$p$pview\">http://plnkr.co/edit/pOY0l18W7wEbfSU7DKw2?p=$p$pview

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