1.问题:在AngularJs前台页面中 实现下拉多选问题
2.解析:checkbox 多选框,ng-repeat="user in users"
3.解决方案:
<div class="row clearfix" style="margin-top: 5px">
<label class="col-xs-4 control-label">爱好选择:</label>
<div class="col-xs-8" style="margin-top: 10px;margin-left:0px;text-align: left">
<div ng-repeat="user in users">
<input type="checkbox"
title="人员选择:"
class="btn"
id="{{user.id}}"
name="{{user.name}}"
ng-checked="isSelected(user.id)"
ng-click="updateSelection($event,user.id)"
ng-model="users">
{{user.displayName}}
</div>
</div>
4.对应的Cotroller 代码
//获取下拉人员列表--- localStorageService
MyController.$inject = ['$state', '$scope', 'Notification', '$log', '$window',
'$stateParams', 'Authentication', 'Upload', 'localStorageService',
'UserService', 'RECACT'];
function MyController($state, $scope, Notification, $log, $window, $stateParams,
Authentication, Upload, localStorageService,UserService, RECACT) {
var vm = this;
var usersTemp = localStorageService.getItems('User');
//设置下拉菜单列表数据
$scope.users = users;
//---------获取选择的多个选项id ,传递给后台更新数据库-----------------------------------------------
$scope.selected = [];
$scope.selectedTags = [];
//实际操作数组的方法
var updateSelected = function (action, id, name) {
if (action === 'add' && $scope.selected.indexOf(id) === -1) {
$scope.selected.push(id);
$scope.selectedTags.push(name);
}
if (action === 'remove' && $scope.selected.indexOf(id) !== -1) {
var idx = $scope.selected.indexOf(id);
$scope.selected.splice(idx, 1);
$scope.selectedTags.splice(idx, 1);
}
// console.log($scope.selected);
};
//根据传入的动作和要操作的id更新Array
$scope.updateSelection = function ($event, id) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
updateSelected(action, id, checkbox.name);
};
//返回true false
$scope.isSelected = function (id) {
return $scope.selected.indexOf(id) >= 0;
};
//-----------------picFile 图片文件二进制数据
------------------------------------
vm.changeUserInfo = function (picFile) {
var user= new UserService();
user.photo = picFile;
Upload.upload({
url: '/api/user/' + id,
data: user
})
.then(function (res) {
$window.alert('设置爱好完成');
vm.goBack();
})
.catch(function (err) {
$log.error('photo update error:', err.data.message);
});
}
vm.goBack = function () {
$window.history.go(-1);
};