[英]Angularjs- adding/removing dynamic html elements (dropdown)
here is my code- http://plnkr.co/edit/oTWXbLIKOxoGTd4U0goD?p=preview 这是我的代码-http://plnkr.co/edit/oTWXbLIKOxoGTd4U0goD? p=preview
why is the days dropdown
does not data bind with scope.demoDays
, it is always empty? 为什么天下拉
dropdown
没有数据与scope.demoDays
绑定,它始终为空?
is this the correct way to add dropdown
dynamically? 这是动态添加
dropdown
的正确方法吗? If user adds 5 dropdown, how to get the results , will ng-model="selectedDay"
create an array of selection? 如果用户添加5下拉列表,如何获取结果,
ng-model="selectedDay"
创建选择数组吗? 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 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. 链接函数中不需要
$watch
您已经通过在scope属性上指定=
建立了双向绑定。 And you can use a plain template, without having to compile. 您可以使用普通模板,而无需进行编译。
templateUrl: 'template.html',
where template.html
is: 其中
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>
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. 请注意,select绑定到
demoDisplay.selection
,它将在每个字段上创建,并且可以通过双向绑定在父作用域上访问。 Also, note that within ng-options
, I changed scope.demoDays
to just demoDays
. 另外,请注意,在
ng-options
,我将scope.demoDays
更改为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: 单击按钮时,可以使用
ng-repeat
内的指令创建其他字段:
<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 这是一个工作正常的插件: http ://plnkr.co/edit/pOY0l18W7wEbfSU7DKw2?p=preview
Any easy fix to get it working. 任何简单的修复方法即可使其正常运行。
In your var template
you have scope.demoDays
. 在您的
var template
您具有scope.demoDays
。
Simply change this to demoDays
. 只需将其更改为
demoDays
。 You are already in this scope so using it again isn't necessary. 您已经在此范围内,因此无需再次使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.