angularJs结合微信的弹性盒模型+bootstrap开发前端并实现数据增加，删除功能。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<script src="underscore-min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<style>
.mobile {
border : solid 1px #999999;
height : 500px;
display : flex;
}
.mobile dl {
margin : 0px;
padding : 0px;
display : flex;
flex : 1;
flex-direction : column-reverse;
}
.mobile dl dt {
background : #999999;
color : #ffffff;
height : 30px;
text-align : center;
border : solid 1px #f3f3f3;
cursor : pointer;
line-height : 2em;
}
.mobile dl dd {
display : flex;
flex-direction : column;
}
.mobile dl dd a {
border : solid 1px #f3f3f3;
text-align : center;
padding : 6px;
text-decoration : none;
}
.top-menu, .sub-menu {
position : relative;
}
.top-menu .top-fa, .sub-menu .sub-fa {
position : absolute;
right : -10px;
top : -10px;
color : #999999;
cursor : pointer;
display : none;
}
.top-menu:hover .top-fa, .sub-menu:hover .sub-fa {
display : block;
}
</style>
<div ng-app="module" ng-controller="ctrl">
<form action="" method="post" class="form-horizontal" role="form">
<div class="container">
<div class="row">
<div class="col-xs-4" class="app">
<div class="mobile">
<dl ng-repeat="v in data.button">
<dt ng-bind="v.name"></dt>
<dd>
<a href="" ng-repeat="d in v.sub_button" ng-bind="d.name"></a>
</dd>
</dl>
</div>
</div>
<div class="col-xs-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">编辑</h3>
</div>
<div class="panel-body">
<!--一级菜单开始-->
<div class="panel panel-default top-menu" ng-repeat="v in data.button">
<i class="fa fa-times-circle top-fa fa-lg" ng-click="removeTopMenu(v)"></i>
<div class="panel-body">
<div class="form-group">
<label class="col-sm-2 control-label">标题</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="v.name">
</div>
</div>
<div class="form-group" ng-hide="v.sub_button.length>0">
<label class="col-sm-2 control-label">类型</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" ng-model="v.type" value="click"> 关键词
</label>
<label class="radio-inline">
<input type="radio" ng-model="v.type" value="view"> 网址
</label>
</div>
</div>
<div class="form-group" ng-if="v.type=='click' && v.sub_button.length==0">
<label class="col-sm-2 control-label">关键词</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="v.key">
</div>
</div>
<div class="form-group" ng-if="v.type=='view' && v.sub_button.length==0">
<label class="col-sm-2 control-label">链接</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="v.url">
</div>
</div>
<!--二级菜单-->
<div class="panel panel-default sub-menu" ng-repeat="d in v.sub_button">
<i class="fa fa-times-circle sub-fa fa-lg" ng-click="removeSubMenu(v,d)"></i>
<div class="panel-body">
<div class="form-group">
<label class="col-sm-2 control-label">标题</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="d.name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">类型</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" ng-model="d.type" value="click"> 关键词
</label>
<label class="radio-inline">
<input type="radio" ng-model="d.type" value="view"> 网址
</label>
</div>
</div>
<div class="form-group" ng-if="d.type=='click'">
<label class="col-sm-2 control-label">关键词</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="d.key">
</div>
</div>
<div class="form-group" ng-if="d.type=='view'">
<label class="col-sm-2 control-label">链接</label>
<div class="col-sm-10">
<input type="text" class="form-control" ng-model="d.url">
</div>
</div>
</div>
</div>
<!--二级菜单 end-->
<button type="button" class="btn btn-info" ng-click="addSubButton(v)">添加菜单</button>
</div>
</div>
<!--一级菜单结束-->
<button type="button" class="btn btn-success" ng-click="addTopButton()">添加一级菜单</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<script>
var m = angular.module('module', []);
m.controller('ctrl', ['$scope', function ($scope) {
$scope.data = {
"button": [
{
"type": "click",
"name": "今日歌曲",
"key": "V1001_TODAY_MUSIC"
},
{
"type": "view",
"name": "百度",
"url": "http://www.baidu.com",
"sub_button": [
{
"type": "view",
"name": "网易",
"url": "http://www.163.com/"
},
{
"type": "view",
"name": "HTML5",
"url": "http://www.html5.com/"
}
]
}
]
}
//删除一级菜单
$scope.removeTopMenu = function (item) {
$scope.data.button = _.without($scope.data.button, item);
}
//删除二级菜单
$scope.removeSubMenu = function (topMenu, subMenu) {
topMenu.sub_button = _.without(topMenu.sub_button, subMenu);
}
//添加一级菜单
$scope.addTopButton = function () {
var menu = {
"type": "view",
"name": "",
"key": ""
};
if ($scope.data.button.length == 3) {
alert('一级菜单最多为三个');
} else {
$scope.data.button.push(menu);
}
}
//添加二级菜单 houdunren.com
$scope.addSubButton = function (item) {
var menu = {
"type": "view",
"name": "",
"key": ""
};
if (!item.sub_button) {
item.sub_button = [];
}
if (item.sub_button.length == 5) {
alert('二级菜单最多为五个');
} else {
item.sub_button.push(menu);
}
}
}]);
</script>
</body>
</html>
扫一扫
2428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
