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

最新推荐文章于 2024-08-28 08:54:36 发布

峰沙同行

最新推荐文章于 2024-08-28 08:54:36 发布

阅读量8.2k

点赞数

分类专栏： AngularJs 文章标签： checkbox select AngualrJs

本文链接：https://blog.csdn.net/u013758456/article/details/76098308

版权

AngularJs 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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