Angularjs - ajout/retrait dynamique des éléments html (liste déroulante)
voici mon code
http://plnkr.co/edit/oTWXbLIKOxoGTd4U0goD?p=preview
-
pourquoi les jours
dropdown
ne pas lier des données avecscope.demoDays
, il est toujours vide? -
est-ce la bonne façon d'ajouter de la
dropdown
dynamiquement? Si l'utilisateur ajoute 5 déroulante, comment faire pour obtenir les résultats , serang-model="selectedDay"
créer un tableau de sélection? des suggestions?
Merci
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>
- merci de poster le code ici, au lieu de se référer à d'autres sites. Thx
- copié js et html ici. Il est beaucoup plus facile de voir JS code qui s'exécute dans plnkr.
Vous devez vous connecter pour publier un commentaire.
Il n'est pas nécessaire pour
$watch
dans votre lien de fonction - vous avez déjà établi la liaison bidirectionnelle en spécifiant=
sur votre périmètre de la propriété. Et vous pouvez utiliser un simple modèle, sans avoir à compiler.où
template.html
est:Avis que la sélection est lié à
demoDisplay.selection
, qui sera créé sur chaque champ et être accessibles sur la portée parent via la liaison bidirectionnelle. Notez également que dansng-options
, j'ai changéscope.demoDays
justedemoDays
. Dans une directive du modèle que vous avez seulement besoin d'utiliser le nom de la propriété à l'accès à un champ d'application valeur.Vous pouvez utiliser la directive à l'intérieur de
ng-repeat
pour créer des champs supplémentaires lorsque le bouton est cliqué:Ici est un travail plunker: http://plnkr.co/edit/pOY0l18W7wEbfSU7DKw2?p=preview
Toute solution facile à faire fonctionner.
Dans votre
var template
vous avezscope.demoDays
.Simplement de changer cela pour
demoDays
. Vous êtes déjà dans ce champ d'application afin de l'utiliser de nouveau n'est pas nécessaire.