2017最佳经典之作-AngularJs 中select 下拉多选

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);};