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

1.问题：在AngularJs前台页面中 实现下拉多选问题

2.解析：checkbox 多选框，ng-repeat="user in users"

3.解决方案：

class="row clearfix" style="margin-top: 5px">
  class="col-xs-4 control-label">爱好选择：
  
class="col-xs-8" style="margin-top: 10px;margin-left:0px;text-align: left">
    
ng-repeat="user in users">
      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}}
    
  

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