发表于: 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">&times;</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">&times;</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;

}

}


好吧,确认操作的方法还没有搞。



收获:

复盘项目进度



返回列表 返回列表
评论

    分享到