实现功能:新增弹出模态框,编辑弹出模态框,并将主页面数据带到模态框,保存提交表单。
主要有几个点,怎么将模态框显示出来,怎么传参,怎么获取模态框中文本框的值,编辑时文本框怎么带入值
说得再多都不如代码直观。
下面是html页面
<button class="btn m-b-xs btn-sm btn-primary btn-addon" data-toggle="modal" data-target="#matchRuleDialog" id="addDict" ng-click="openModal('add')"><i class="fa fa-plus"></i>新增</button>
<button class="btn m-b-xs btn-sm btn-primary btn-addon" id="editDict" ng-click="openModal('edit')"><i class="fa fa-plus"></i>编辑</button>
这个是新增和编辑按钮,用来弹出模态框。 ng-click="openModal(),里面的参数edit和add是用于js中 辨别新增还是编辑的。
下面是模态框,两段代码放在同一个HTML页面
<script type="text/ng-template" id="modal.html">
<div class="hbox" id="matchRuleDialog" data-backdrop="static"
data-keyboard="false" aria-hidden="true">
<div >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()">
<span>×</span>
</button>
</div>
<div class="modal-body">
<form name="form-contact" class="form-validation" ng-submit="submitForm()">
<input type="hidden" ng-model="dict.dictId" >
<input type="hidden" name="matchItemValue" ng-model="dict.parentId">
<div class="form-group">
<label class="control-label col-lg-3 col-sm-3 col-xs-3"
for="matchItemValue-input"> <span
id="tv-iui-matchItemValueLabel">数据字典编码</span> <span
class="required">*</span>
</label>
<div class="col-lg-7 col-sm-7 col-xs-7">
<input type="text" class="form-control" id="dictCode"
name="matchItemValue" ng-model="dict.dictCode" required>
<span style="color: red"
ng-show="mainCtrl.matchRuleForm.matchItemValue.$dirty && mainCtrl.matchRuleForm.matchItemValue.$invalid">
<span
ng-show="mainCtrl.matchRuleForm.matchItemValue.$error.required"
id="tv-iui-requiredWarning">必填项</span>
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-3 col-sm-3 col-xs-3"
for="promiseSpeed-input"> <span
id="tv-iui-promiseSpeedLabel">数据字典名称</span> <span
class="required">*</span>
</label>
<div class="col-lg-7 col-sm-7 col-xs-7">
<input type="text" class="form-control" id="promiseSpeed-input"
name="promiseSpeed" ng-model="dict.dictName" required>
<span style="color: red"
ng-show="mainCtrl.matchRuleForm.promiseSpeed.$dirty && mainCtrl.matchRuleForm.promiseSpeed.$invalid">
<span
ng-show="mainCtrl.matchRuleForm.promiseSpeed.$error.required"
id="tv-iui-requiredWarning">必填项</span> <span
ng-show="mainCtrl.matchRuleForm.promiseSpeed.$error.pattern"
id="tv-iui-patternWarning">不符合规则</span>
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-3 col-sm-3 col-xs-3"
for="promiseBandwidth-input"> <span
id="tv-iui-promiseSizeLabel">数据字典类型</span> <span
class="required">*</span>
</label>
<div class="col-lg-7 col-sm-7 col-xs-7">
<input type="text" class="form-control"
id="promiseBandwidth-input" name="promiseSize"
ng-model="dict.dictType" required> <span
style="color: red"
ng-show="mainCtrl.matchRuleForm.promiseSize.$dirty && mainCtrl.matchRuleForm.promiseSize.$invalid">
</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-3 col-sm-3 col-xs-3" for="promiseSpeed-input"> <span
id="tv-iui-peakSpeedLabel">备注</span>
</label>
<div class="col-lg-7 col-sm-7 col-xs-7">
<input type="text" class="form-control" id="peakSpeed-input"
name="peakSpeed" ng-model="dict.remark" >
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="saveButton">保存</button>
<button class="btn btn-default" ng-click="cancel()"
id="tv-iui-matchRule-cancle">取消</button>
</div>
</form>
</div>
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="modal.html"> 指名ng模板,id是实际使用模板的引用,标签中的内容才是真正的模板。
data-backdrop="static" 是点击背景空白处窗口不关闭,data-keyboard="false"触发ESC事件时不关闭, aria-hidden="true"
下面是js代码,用于打开模态框,在主页面的app.controller的参数必须有$modal
//打开模态框
$scope.openModal = function(add) {
var modalInstance = $modal.open({
templateUrl : 'modal.html',//script标签中定义的id
controller : 'modalCtrl',//modal对应的Controller
resolve : {
data : function() {//data作为modal的controller传入的参数
return $scope.dict.Id+","+add;//用于传递数据
}
}
})
}
app.controller('modalCtrl', function($scope, $modalInstance, data,$http,$state) {
var strs= new Array(); //定义一数组
strs=data.split(","); //字符分割
$scope.data= data;
$scope.dict={};
//在这里处理要进行的操作
$http({
method: 'post',
url: '/Dict/getDictByPrimaryKey',
params: {
dictId: strs[0]
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(resp) {
if(strs[1]=="add")
{
//执行某些操作
}
if(strs[1]=="edit")
{
//给模态框中的文本框赋值
$scope.dict.dictCode = resp.data.data.dictCode;
$scope.dict.dictName = resp.data.data.dictName;
$("#promiseBandwidth-input").attr("readonly",true);
$scope.dict.dictType = resp.data.data.dictType;
},
function(resp) {
});
$scope.ok = function() {//点击确定按钮关闭模态框
$modalInstance.close();
};
$scope.cancel = function() {取消关闭
$modalInstance.dismiss('cancel');
}
// 保存菜单信息
$scope.submitForm = function() {
$http({
method: 'post',
url: '/Dict/saveDict',
data: $.param($scope.dict),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(resp) {
if(resp.data.code == '0') {
// 关闭也面
$modalInstance.close();
$state.reload();
} else {
layer.msg(resp.data.message);
}
}, function(resp) {
});
};