Comment faire pour que les groupes de boutons Twitter Bootstrap fonctionnent avec AngularJS?
Je suis en train de créer un simple twitter bootstrap groupe de boutons qui permet à l'utilisateur de sélectionner un ou plusieurs options (pensez à boutons radio). Je l'ai à un point où c'est touchant des modifications sur le modèle, mais à l'état "actif" n'est pas correctement définie onclick...sauf si je clique une deuxième fois?? J'ai créé un violon et la base de balisage suit...
<div range="justified"
model="myModel"
options="rangeOptions"></div>
<hr/>
<div range="vertical"
model="myModel"
options="rangeOptions"></div>
<hr/>
<pre>myModel:{{myModel}}</pre>
<script type="text/ng-template" id="range.tpl.html">
<div class="btn-group btn-group-{{type}}" data-toggle="buttons">
<span class="btn btn-lg btn-primary"
ng-repeat="option in options"
ng-class="{active:option.id==model.range_id}" <!-- not working?? -->
ng-click="activate(option.id)">{{option.label}}</span>
</div>
</script>
function Main($scope) {
$scope.rangeOptions = [
{id:1,label:"Agree"},
{id:2,label:"Neutral"},
{id:3,label:"Disagree"}
];
$scope.myModel = {range_id: 2};
}
angular
.module('range', [])
.directive('range', function () {
return {
replace: true,
scope: { type:'@range', model:'=', options:'=' },
templateUrl:'range.tpl.html',
controller: function ($scope,$element,$attrs) {
$scope.activate = function (option) {
$event.preventDefault();
};
}
};
});
source d'informationauteur Brian
Vous devez vous connecter pour publier un commentaire.
Vous n'avez pas besoin de 90% bootstrap js pour obtenir ce genre de choses à travailler tout ce que vous devez faire est de faire un groupe de boutons et de fixer quelques ng-clics et ng-catégorie:
Il y a plus d'info ici sur faire votre bouton groupe de travail que des boutons radio.
http://getbootstrap.com/javascript/#buttons
À l'aide de cette info, je bifurquais votre Violon et cela semble fonctionner.
http://jsfiddle.net/puatj/
Le changement était tout simplement pour passer votre élément span pour un label/input.
Si vous ne me dérange pas de donner un peu de chic bootstrap style, vous pouvez résoudre ce problème en prenant simplement les données-activer la balise de
Vous pouvez trouver le JSFiddle ici.
Laisser data-toggle="boutons" de la div parent et ajouter une classe ou un style dans les entrées de définir les propriétés width: 0px et visibility: hidden.
Pour afficher les boutons actifs, utilisez ng-init, ng-click, et ng-classe à bascule active classes.
J'ai trouvé l'angle moyen de la manipulation de ce, directement à partir d'un tableau dans votre contrôleur.