Angularjs Chosen Example - Jquery
How to integerate chosen into angularjs?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Angularjs chosen is generally defind as the directive which is used to bring the chosen jquery plugin into angularjs. The sample code for angularjs chosen with ngModel and ngOptions integration is given below.
<html ng-app="chosenExampleApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/localytics/angular-chosen/master/example/vendor/chosen.jquery.js"></script>
<script src="https://raw.githubusercontent.com/localytics/angular-chosen/master/chosen.js"></script>
<script>
angular.module('chosenExampleApp', ['localytics.directives']).config([
'$parseProvider', function($parseProvider) {
return $parseProvider.unwrapPromises(true);
}
]).controller('IndexCtrl', [
'$scope', '$q', '$timeout', function($scope, $q, $timeout) {
var simulateAjax;
simulateAjax = function(result) {
var deferred, fn;
deferred = $q.defer();
fn = function() {
return deferred.resolve(result);
};
$timeout(fn, 3000);
return deferred.promise;
};
simulateAjax(['hscripts', 'hibihi', 'statmonkey', 'shorttutorials', 'easycalculation', 'quotespick', 'eluthu']).then(function(result) {
return $scope.optionsFromQuery = result;
});
$scope.optionsFromQueryAsHash = (function() {
var result;
result = {
win: "Brilliant Escape",
fail: "Untimely Demise"
};
return simulateAjax(result);
})();
$scope.$watch('emptyCollection', function(empty) {
return $scope.emptyOptions = simulateAjax(empty ? [] : ['look', 'i', 'have', 'data']);
});
$scope.directiveOptions = {
no_results_text: "SO SORRY"
};
$scope.myPets = ['cat'];
$scope.pets = {
cat: 'Cat',
dog: 'Dog',
hamster: 'Hamster'
};
$timeout(function() {
return $scope.$apply(function() {
return $scope.myPets.push('hamster');
});
}, 1000);
return $scope.disabled = true;
}
]);
</script>
</head>
<body ng-controller="IndexCtrl">
<h4>Chosen with a promise: {{foo | json}}</h4>
<select
chosen
multiple
allow-single-deselect="true"
data-placeholder="Choose Your Website"
no-results-text="'Tough luck'"
ng-model="foo"
ng-options="value for value in optionsFromQuery"
style="width:200px;">
<option value=""></option>
</select>
</body>
</html>
