angularJs弹性盒模型+bootstrap开发案例
来源：互联网 发布：淘宝店铺如何冲上销量 编辑：程序博客网 时间：2024/05/29 08:17
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>阅读全文
0 0
- angularJs弹性盒模型+bootstrap开发案例
- Css3弹性盒模型
- Css3弹性盒模型
- Css3弹性盒模型
- Flex弹性盒模型
- CSS3弹性盒模型
- 弹性盒模型
- 弹性盒模型
- Css3 弹性盒模型
- 弹性盒模型
- css3-弹性盒模型
- css3-弹性盒模型
- 弹性盒模型
- html 弹性盒模型
- 弹性盒模型
- Flex弹性盒模型
- 弹性盒模型
- 弹性盒模型总结
- Java容器LinkedList源代码解析
- Dialog Style属性设置
- Linux 网络
- 使用archetype插件创建符合maven规定的目录骨架
- 原型模式（浅复制和深复制）
- angularJs弹性盒模型+bootstrap开发案例
- 通过git clone安装caffe
- codeforces——723A—— The New Year: Meeting Friends
- Python中捕获异常信息
- Android的EditText设置可编辑与不可编辑怎样切换
- Kotlin -- 对象表达式和对象声明
- Java集合类详解
- uvc设备通过v4l2驱动( QT项目）
- 283. Move Zeroes
