I am trying to achieve Multiselect dropdown with checkboxes by using selectiz.js. I am able to customize my dropdown using render option in selectize. However if i click one of the checkboxes it will click all the others checkboxes which is not desired. I understand that this is because all the options are binded to one ng-model. I tried to make it dynamic but everything seems to fail Under selectize render options. I will really appreciate if some one can help me with this issue. I have tried to put the simplest version here. Also please note I amusing Icheck plugin for checkboxes.
<html ng-app="checkBoxes">
<head>
<body ng-controller="selectizeDropdownCtrl">
<h2 class="header">Multi Selelct</h2>
<input id="dropdown" config="assigneeConfig" options="assigneesOptions" position="bottom" ng-model="model" selectize/>
</body>
"use strict";
angular.module('checkBoxes')
.controller('selectizeDropdownCtrl',
function ($rootScope, $scope, $compile) {
//================================================================
// Initialize Data
//================================================================
$scope.assigneesOptions = [
{
"id": "1",
"name": "Mercury, Freddie"
},
{
"id": "2",
"name": "Morty, Rick"
}
];
$scope.assigneeConfig = {
autoBind: true,
valueField: 'id',
labelField: 'name',
maxItems: null,
placeholder: 'Select...',
render: {
option: function (item, escape) {
var html= '<div class="option">' +
'<div class="uk-input-group">'+
'<span class="uk-input-group-addon"><input type="checkbox" ng-model= "checkboxesModel" icheck/></span>'+
' <span class="name">' + escape(item.name) + '</span>'++
'</div>';
return $compile(html)($scope)
}
},
};
});
Aucun commentaire:
Enregistrer un commentaire