用于多选的AngularJS指令 [英] AngularJS directive for a multi-select
问题描述
我在填充多选内容时遇到了麻烦.我正在使用此版本的多选 http://davidstutz.github.io/bootstrap-multiselect /
I am having trouble populating my multi-select. I am using this version of the multi-select http://davidstutz.github.io/bootstrap-multiselect/
我看过这个堆栈溢出页面(我在AngularJS中使用Bootstrap Multiselect Dropdown )，但仍然遇到问题.我试图用从数据库中获取的数据填充多选，该数据库存储在provData中.
I have looked at this stack overflow page (How can I use Bootstrap Multiselect Dropdown in AngularJS) but I am still having problems. I am trying to populate my multi-select with data that I grab from a database which gets stored in provData.
这是我的html:
<div class="col-sm-8">
<select class="form-control" multiple ht-multi-select ng-model="patient.provid" ng-options="prov.id as prov.code for prov in provData">
<option value="{{prov.id}}">{{prov.code}}</option>
</select>
</div>
这是我的指令:
templates.directive('htMultiSelect', function() {
return {
replace: true,
require: 'ngModel',
scope: {},
link:function(scope, element, attrs) {
console.log($(element));
console.log('hit');
// Below setup the dropdown:
$(element).multiselect({
enableClickableOptGroups: true
});
// Below maybe some additional setup
scope.$watch(attrs.ngModel, function () {
$(element).multiselect('refresh');
});
}
};
});
我的主要问题是我无法使用provData中的数据填充多选，也无法设置ng-model.任何帮助将不胜感激.
My main issue is I can not populate my multi-select with data from provData and I can not get it to set the ng-model. Any help will be greatly appreciated.
推荐答案
基于Rashim的博客，这就是我在Plunke中尝试过的. https://rashimuddin.wordpress.com/2014/07/08/multi-select-drop-down-in-angularjs/
Based on Rashim's blog, this is what I tried in Plunke. https://rashimuddin.wordpress.com/2014/07/08/multi-select-drop-down-in-angularjs/
检查一下
http://plnkr.co/edit/y8VOlgeSMOqHjFxoZU1L?p=preview enter code here
HTML
<div dropdown-multiselect="" items="FirstItems" on-close="closeAlert(val)" on-Validation="addAlert(validationMsg)" max-Selection="3" selected-items="FirstSelectedItems"></div>
Angular指令将
Angular directive would be
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('AppCtrl', ["$scope", function($scope) {
$scope.status = {
isopen: false
};
$scope.FirstItems = [];
$scope.alerts = [{
type: 'danger',
msg: 'Oh snap! Change a few things up and try submitting again.'
}, {
type: 'success',
msg: 'Well done! You successfully read this important alert message.'
}];
$scope.addAlert = function(validationMsg) {
if ($scope.validateFire === true) {
$scope.alerts.push({
msg: validationMsg
});
}
$scope.validateFire = true;
};
$scope.closeAlert = function(val) {
$scope.alerts = [];
}
for (var i = 0; i <= 20; i++) {
var obj = [];
obj["Id"] = i;
obj["Name"] = "Name" + i;
obj["IsSelected"] = false;
$scope.FirstItems.push(obj);
}
$scope.FirstSelectedItems = [];
var removeItem = function(items, item) {
for (var index = 0; index < items.length; index++) {
if (item.Id == items[index].Id) {
item.IsSelected = false;
items.splice(index, 1);
break;
}
}
};
$scope.removeFirstItem = function(item) {
removeItem($scope.FirstSelectedItems, item);
};
$scope.removeSecondItem = function(item) {
removeItem($scope.SecondSelectedItems, item);
};}]);
指令是这样的
app.directive('dropdownMultiselect'，function(){
返回 {
限制:"A"，
范围: {
项目:"="，
selectedItems:"=，
maxSelection:"="，
validateFire:"="，
onValidation:&"，
onClose:&"
}，
模板:" +
" +
添加" +
" +
" +
" +
" +
全部" +
无" +
" +
"
" +
" +
" +
"{{item.Name}}" +
" +
" +
"，
控制器:function($ scope){
$ scope.handleClick = function($ event){
$ event.stopPropagation();
};
$ scope.status = {
isopen:否
};
$ scope.status = {
isopen:否
};
app.directive('dropdownMultiselect', function() {
return {
restrict: 'A',
scope: {
items: "=",
selectedItems: "=",
maxSelection: "=",
validateFire: "=",
onValidation: '&',
onClose: '&'
},
template: "" +
"" +
"Add " +
"" +
"" +
"" +
"" +
"All " +
"None" +
"" +
"
" +
"" +
" " +
"{{item.Name}}" +
"" +
"" +
"",
controller: function($scope) {
$scope.handleClick = function($event) {
$event.stopPropagation();
};
$scope.status = {
isopen: false
};
$scope.status = {
isopen: false
};
$scope.openDropdown = function($event) {
if ($scope.items !== undefined && $scope.items.length > 0) {
if ($scope.items.length > $scope.maxSelection)
$scope.showAll = false;
else
$scope.showAll = true;
for (var index = 0; index < $scope.items.length; index++) {
$scope.items[index].IsSelected = false;
}
if ($scope.selectedItems !== undefined && $scope.selectedItems.length > 0) {
for (var selectedItemIndex = 0; selectedItemIndex < $scope.selectedItems.length; selectedItemIndex++) {
for (var itemIndex = 0; itemIndex < $scope.items.length; itemIndex++) {
if ($scope.selectedItems[selectedItemIndex].Id == $scope.items[itemIndex].Id) {
$scope.items[itemIndex].IsSelected = true;
break;
}
}
}
}
}
$event.stopPropagation();
$scope.status.isopen = true;
};
$scope.selectAll = function($event) {
$scope.selectedItems = [];
angular.forEach($scope.items, function(item) {
item.IsSelected = true;
$scope.selectedItems.push(item);
});
$event.stopPropagation();
};
$scope.deselectAll = function($event) {
angular.forEach($scope.items, function(item) {
item.IsSelected = false;
});
$scope.selectedItems = [];
$event.stopPropagation();
};
$scope.selectItem = function(item) {
if (item.IsSelected === false) {
for (var index = 0; index < $scope.selectedItems.length; index++) {
if (item.Id == $scope.selectedItems[index].Id) {
item.IsSelected = false;
$scope.selectedItems.splice(index, 1);
$scope.onClose({
val: "1"
});
break;
}
}
} else {
if ($scope.selectedItems.length > $scope.maxSelection) {
item.IsSelected = false;
$scope.validationMsg = "MAX_REACHED";
$scope.validateFire = true;
$scope.onValidation({
validationMsg: "Max_Reached"
});
return;
}
$scope.selectedItems.push(item);
}
};
$scope.clickItem = function($event) {
$event.stopPropagation();
};
$scope.closeDropDown = function() {
$scope.status.isopen = false;
$event.stopPropagation();
};
}
}; });`
这篇关于用于多选的AngularJS指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
