Astuce sur l’utilisation de angular-ui-select2

Pour commencer vous pouvez ajouter le composant avec bower :

bower install angular-ui-select2 --save

Dans notre cas nous l'avons utilisé avec angular 1.2.13.

La première chose à savoir sur ui-select2 c'est que celui-ci est incompatible avec <select ng-options>, il faudra donc utiliser <option ng-repeat>.

Exemple:

<select ui-select2 ng-model="utilisateur.regionId">
             <option value=""></option>
              <option ng-repeat="region in regions" value="{{region.id}}">{{region.libelle}}</option>
</select>

On s'aperçoit qu'il y a deux problèmes, en effet l'option vide ne s'affiche pas, de plus quand on soumet le formulaire, la valeur renvoyée est un String ce qui est problématique pour ce type de cas, on préférait avoir un int ou un Long.

La solution consiste à créer une directive :

.directive('parseinteger', function() {
	return {
		require: 'ng-model',
		link: function(scope, element, attrs, ctrl) {
			ctrl.$parsers.unshift(function(viewValue) {
				if (viewValue == 'null' || viewValue == null) {
					return null;
				}
				return parseInt(viewValue, 10);
			});
		}
	};
})

Voici l'utilisation de ui-select2 avec la directive :

<select ui-select2 ng-model="utilisateur.regionId" parseinteger>
           <option value="null"></option>
             <option ng-repeat="region in regions" value="{{region.id}}">{{region.libelle}}</option>
</select>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.