发表于: 2017-03-03 23:05:38
2 1127
今天完成的事情:完成了职位列表的简单渲染,上架和下架的功能暂未实现的。
明天计划:完成上架和下架的功能,开始做Artical页面
问题:暂无
收获:学习了ui-botstrap中的modal。简单写一下,model的用法。
首先是model的模板部分,分为3个部分,一个是model-header,一个是modal-body部分,还又modal-footer部分,如下:
html部分:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
页面上进行点击的部分,可以是长这样的,其中sm md lg 三种可选大小,这里是模态框的大小:
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
再来JS部分:
依赖部分:angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
注入部分:angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibMadal){})
modal弹出:
$scope.open = function (size) {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html', 此处对应的是html页面modal对应的id,也可以modal写在一个单独的html中,链接引入
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
用户点击后执行的方法:
modalInstance.result.then(
function (selectedItem) {
$scope.selected = selectedItem;
});
此处省略1万字
评论