发表于: 2017-04-17 10:24:33
1 1215
完成的事情:
增加了模态框功能
计划的事情:
后台管理部分开始
问题:
模态框嘛,原生的样式不太好,就使用了bootstrap组件。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
由于想要传点什么参数,还有在模态框中展示点什么内容,故不使用data-toggle="modal" data-target="#myModal"来弹出模态框,使用bootstrap提供的方法
$('#myModal').modal('show');
然后根据需求进行处理:
<span ng-click="operate('job',comData[$index])">{{{true:'职位'}[comData[$index].id>0]}}</span>
<span ng-click="operate('approved',comData[$index])">{{{1:'解除',0:'认证'}[comData[$index].approved]}}</span>
<span ng-click="operate('id',comData[$index])">{{{true:'编辑'}[comData[$index].id>0]}}</span>
<span class="fcR" ng-click="operate('freezed',comData[$index])">{{{1:'解冻',0:'冻结'}[comData[$index].freezed]}}</span>
<span class="fcR" ng-click="operate('del',comData[$index])">{{{true:'删除'}[comData[$index].id>0]}}</span>
<!-- Modal -->
<div class="modal fade" id="comModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">操作提示</h4>
</div>
<div class="modal-body" style="text-align:center;">
<div>{{value1}}</div>
</br>
<div>{{value2}}</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="operateOk()">确定</button>
</div>
</div>
</div>
</div>
//操作
$scope.operate = function(str,data){
$scope.string = str;
switch($scope.string){
case 'status'://上线、下线
if(data.status){
}else{
$('#artModal').modal('show');
$scope.value1 = '删除后该Articler图将直接下架并在本地删除';
$scope.value2 = '你确定要执行删除操作吗?';
}
break;
case 'id'://编辑页跳转
$state.go('articleSet');
break;
case 'del'://删除
$('#artModal').modal('show');
$scope.value1 = '删除后该职位信息将无法使用及还原';
$scope.value2 = '是否执行删除操作';
break;
default:
break;
}
}
//确认操作
$scope.operateOk = function(){
switch($scope.string){
case 'approved'://解除、认证
break;
case 'freezed'://冻结、解冻
break;
case 'del'://删除
break;
default:
break;
}
}
好吧,确认操作的方法还没有搞。
收获:
复盘项目进度
评论