AngularJS plusieurs modèle de sélection de la liaison de données

J'ai dû écrire un multi sélectionnez la directive moi-même dans le passé, n'hésitez pas à le saisir à http://isteven.github.io/angular-multi-select.

Comme pour la liaison de données approche, ma structure de données est en fait assez similaire à la vôtre, mais dans mon approche, j'ai ajouté un de plus la propriété, qui représentent la case de l'état.

Exemple, avec votre contribution ci-dessus, j'ai ajouté "checked":

$scope.xs = [
{ id:1, value:'value 1', checked: false },
{ id:2, value:'value 2', checked: false },
{ id:3, value:'value 3', checked: false }
];

Et je le passe à la directive comme ceci:

<div 
multi-select 
input-model="xs" 
button-label="value" 
item-label="id value" 
tick-property="checked" >
</div>

Lorsque vous cochez /décochez une case à cocher, la directive permettra de modifier le modèle d'entrée de $champ d'application.xs.vérifié en conséquence. Pour ce faire, j'attacher un gestionnaire de clic sur chaque case. Ce gestionnaire va appeler une fonction dans laquelle je passe la case objet en tant que paramètre de la fonction. Cette fonction sera alors de synchroniser la case à cocher état et le modèle.

Pour obtenir choisis /a coché des cases à cocher, vous aurez seulement besoin de boucle $scope.xs plus où .checked === true

Exemple:

angular.forEach( $scope.xs, function( value, key ) {
if ( value.checked === true ) {
//Do your stuff here
}
});

Pardon pour mon mauvais anglais, et espérons que cette aide. Des acclamations.

OriginalL'auteur user3587521

J'avais besoin d'une case à cocher solution qui permettrait d'afficher aussi les valeurs qui n'étaient pas dans la liste des choix possibles (si la liste a changé depuis que l'utilisateur a rempli le formulaire?).

Aussi, je ne pense pas qu'une fonction de veille a été nécessaire.

Enfin, j'ai dû passer dans la forme donc je pourrais le mettre au sale si l'utilisateur a activé les cases.

Mise en garde: Dans mon cas, j'ai seulement besoin d'un tableau de chaînes de caractères, comme mon modèle, ce qui n'est pas exactement ce que l'affiche a été à l'aide de son modèle.

HTML:

<multiple-checkbox
form="form"
selections="model"
options="options">
</multiple-checkbox>

Directive:

.directive("multipleCheckbox", function () {
return {
restrict: 'E',
scope: {
form: '=',
selections: '=',
options: '=',
},
template:
'<div>' +
'<div class="checkbox" ng-repeat="item in options">' +
'<label>' +
'<input type="checkbox" value="{{$index}}" ng-checked="selections.indexOf(item) > -1" ng-click="toggle(item)"/>' +
'{{item}}' +
'</label>' +
'</div>' +
'<div class="checkbox" ng-repeat="item in selections" ng-if="options.indexOf(item) === -1">' +
'<label>' +
'<input type="checkbox" value="{{options.length + $index}}" ng-checked="selections.indexOf(item) > -1" ng-click="toggle(item)"/>' +
'<strong>Other: </strong>{{item}}' +
'</label>' +
'</div>' +
'</div>',
controller: ['$scope', function ($scope) {
//Executed when the checkboxes are toggled
$scope.toggle = function (item) {
//set the form to dirty if we checked the boxes
if ($scope.form) $scope.form.$dirty = true;
//get the index of the selection
var index = -1;
if (angular.isArray($scope.selections)) {
index = $scope.selections.indexOf(item);
}
//if it's not already an array, initialize it
else $scope.selections = [];
if (index > -1) {
//remove the item
$scope.selections.splice(index, 1);
//if the array is empty, set it to null
if ($scope.selections.length === 0) {
$scope.selections = null;
}
}
else if (index < 0) {
//add the item
$scope.selections.push(item);
}
};
}],
};
});

OriginalL'auteur Scrappy Doo