AngularJs 中的CheckBox前后台交互

最新推荐文章于 2020-12-03 11:58:47 发布

qq_43765727

最新推荐文章于 2020-12-03 11:58:47 发布

阅读量258

点赞数 1

CC 4.0 BY-SA版权

分类专栏： angularjs

本文链接：https://blog.youkuaiyun.com/qq_43765727/article/details/98059207

angularjs 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何在AngularJS应用中实现服务类型的绑定操作。通过js代码，我们能从数据库查询服务类型并显示在前端页面上，同时提供复选框功能以选择服务类型进行绑定。文章还介绍了如何设置复选框的选中状态，并在用户确定选择后提交所选服务类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考自:https://www.cnblogs.com/zfdcp-028/p/5708558.html
效果: G:\angularjs\work\bc-epc\app\controllers\common\super-admin\pools\region\service-types

html代码

服务类型	服务名称
暂无数据
{{row.serviceName}}	{{item}}

js代码

//初始化数据将数据库里查询出来的数据存放到集合 
ctrl.serviceType = [];
ctrl.serviceType.push(modalData.serviceType)


// 获取服务类型
superPoolsService.getServiceTypeList().success(function(response) {
    ctrl.serviceTypeList = response.entity;
})


var updateSelection = function(action,name) {
    if (action == 'add' && ctrl.serviceType.indexOf(name) == -1) {
        ctrl.serviceType.push(name)
    }
    if (action == 'remove' && ctrl.serviceType.indexOf(name) != -1) {
        var idx = ctrl.serviceType.indexOf(name);
        ctrl.serviceType.splice(idx,1)
    }
}

ctrl.updateSelection = function($event,name){
    var checkbox = $event.target;
    var action = (checkbox.checked ? 'add' : 'remove');
    updateSelection(action,name)
}

// 设置复选框的选中状态
ctrl.isSelected = function(name) {
    return ctrl.serviceType.indexOf(name) >= 0
}

ctrl.submit = function() {
   
    var selectServerType = []
    
    angular.forEach(ctrl.serviceType,function(item,index) {
        selectServerType.push({serviceType: item});
    })
    superPoolsService.bindServerType(poolId,regionName,selectServerType).success(function(response){
        if (response.success) {
            $uibModalInstance.close({result:true, message:"绑定服务类型成功"})
        } else {
            $uibModalInstance.close({result:false, message:response.message})
        }
    }).error(function(error) {
        console.log(error)
    })
}
ctrl.cancel = function() {
    $uibModalInstance.dismiss('close');
}

}])