http://www.cnblogs.com/qianmojing/p/6142178.html
/***
* 这里是登陆模块
* ***/
app.controller('validateCtrl',function($scope){
$scope.user={
email:'',
password:''
};
$scope.arrs={
email:'song@126.com',
password:'123456'
};
$scope.compare = function(user){
$scope.user= user;
$scope.same = angular.equals($scope.user.email,$scope.arrs.email)//对比
$scope.same1 = angular.equals($scope.user.password,$scope.arrs.password)//对比
console.log($scope.same);
console.log($scope.same1);
console.log($scope.user.email);
if($scope.same == false){
$scope.user.email='用户名不正确';
console.log(user.email);
};
if($scope.same1 == false){
$scope.user.password='';
console.log(user.password);
}
}
});
/**
*后台界面
**/
app.controller('booklist',function($scope,$http){
$scope.booklist ={};
$http.get('data/bookslist.json')
.success(function (item){
$scope.booklist = item;
console.log($scope.booklist)
});
});
/**
* 这里是书籍列表模块
**/
var bookListModule = angular.module("BookListModule", []);
bookListModule.controller('BookListCtrl', function($scope, $http, $state, $stateParams) {
//以下是分页内容
$scope.filterOptions = {
filterText: "",
useExternalFilter: true
};
$scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: [5, 10, 20],
pageSize: 5,
currentPage: 1
};
$scope.setPagingData = function(data, page, pageSize) {
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.books = pagedData;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
};
//这里可以根据路由上传递过来的bookType参数加载不同的数据
console.log($stateParams);
$scope.getPagedDataAsync = function(pageSize, page, searchText) {
setTimeout(function() {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$http.get('../src/data/books' + $stateParams.bookType + '.json')//通过传值调用不同json
.success(function(largeLoad) {
data = largeLoad.filter(function(item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
$scope.setPagingData(data, page, pageSize);
});
} else {
$http.get('../src/data/books' + $stateParams.bookType + '.json')
.success(function(largeLoad) {
$scope.setPagingData(largeLoad, page, pageSize);
});
}
}, 100);
};
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
$scope.$watch('pagingOptions', function(newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.$watch('filterOptions', function(newVal, oldVal) {
if (newVal !== oldVal) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.gridOptions = {
data: 'books',//表格中显示的数据来源
rowTemplate: '<div style="height: 100%"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
'<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' +
'<div ng-cell></div>' +
'</div></div>',
multiSelect: false,//是否能多选
enableCellSelection: true, //是否能选择单元格
enableRowSelection: false,//是否能选择行
enableCellEdit: true,//是否能修改内容
enablePinning: true, //是否被锁住了
columnDefs: [{
field: 'index',//这里是数据中的属性名
displayName: '序号', //这里是表格的每一列的名称
width: 60,//表格的宽度
pinnable: false,
sortable: true//是否能排序
}, {
field: 'name',
displayName: '书名',
enableCellEdit: true
}, {
field: 'author',
displayName: '作者',
enableCellEdit: true,
width: 220,
pinnable: true,
sortable: true
}, {
field: 'pubTime',
displayName: '出版日期',
enableCellEdit: true,
width: 120
}, {
field: 'price',
displayName: '定价',
enableCellEdit: true,
width: 120,
cellFilter: 'currency:"￥"'
}, {
field: 'bookId',
displayName: '操作',
enableCellEdit: false,
sortable: false,
pinnable: false,
cellTemplate: '<div><a ui-sref="bookdetail({bookId:row.getProperty(col.field)})" id="{{row.getProperty(col.field)}}">详情</a></div>'
}],
enablePaging: true,//是否能翻页
showFooter: true,//是否显示表尾
totalServerItems: 'totalServerItems',//数据的总条数
pagingOptions: $scope.pagingOptions,//分页部分
filterOptions: $scope.filterOptions,//数据过滤部分
};
});
/**
* 这里是书籍详情模块
* @type {[type]}
*/
var bookDetailModule = angular.module("BookDetailModule", []);
bookDetailModule.controller('BookDetailCtrl', function($scope, $http, $state, $stateParams) {
console.log($stateParams);
});
var bookadd = angular.module('Bookadd',['ngAnimate', 'ngSanitize','ui.bootstrap']);
bookadd.controller('Bookaddctrl',function($scope,$http,$state, $stateParams){
function abf(){
$scope.userInfo={};//空
$scope.userInfo.dt = new Date();//日历
$scope.popup2 = {
opened: false
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.sites=[ //下拉列表
{id:0,site:'计算机'},
{id:1,site:'金融'},
{id:2,site:'哲学'},
{id:3,site:'历史'}
];
$scope.userInfo.zw = '1';//默认选中一个
};
abf();//执行
$scope.geto =function(user){
$scope.userInfo = user
console.log($scope.userInfo.dt.toISOString().slice(0,10))//日期格式化
$http({
url:'data/books5.json',
method:'POST',
data:$scope.userInfo,
data:JSON.stringify($scope.userInfo)
}).success(function(da){
console.log(da);
// console.log($stateParams);
window.history.back();
});
};
$scope.setFormData = function(){//清空
abf();
}
})
var app = angular.module('routerApp',['ui.router','ngGrid', 'BookListModule', 'BookDetailModule','Bookadd']);
/**
* 由于整个应用都会和路由打交道，所以这里把$state和$stateParams这两个对象放到$rootScope上，
* 方便其它地方引用和注入。
* 这里的run方法只会在angular启动的时候运行一次。
* $rootScope
* $state
* $stateParams
**/
app.run(function($rootScope,$state,$stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
/**
* 配置路由.config
* 这里采用的是ui-router这个路由，而不是原生的ng-router路由
* ng原生的路由不能支持嵌套视图，所以这里必须使用ui-router;
* $stateProvider
* $urlRouterProvider
**/
app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/index');//没有任何值得情况下去到index
$stateProvider.state('index',{//登陆页面
url:'/index',
templateUrl:'tpls/loginForm.html'
}).state('booklist',{//后台界面
url: '/{bookType:[0-9]{1,4}}',
views: { //注意这里的写法，当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作
'': {
templateUrl: 'tpls/bookList.html'
},
'bookgrid@booklist': {
templateUrl: 'tpls/bookGrid.html'
}
}
}).state('addbook', {
url: '/addbook',
views: { //注意这里的写法，当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作
'': {
templateUrl: 'tpls/bookList.html'
},
'addbook@addbook':{
templateUrl: 'tpls/addBookForm.html'
}
}
})
.state('bookdetail', {
url: '/bookdetail/:bookId',//注意这里在路由中传参数的方式
views: { //注意这里的写法，当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作
'': {
templateUrl: 'tpls/bookList.html'
},
'seebook@bookdetail':{
templateUrl: 'tpls/bookDetail.html'
}
}
})
})
复制代码
<!-- 导航 -->
<nav class="navbar navbar-inverse lan navbar-static-top" role="navigation">
<div class="navbar navbar-inverse lan navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#leftnav" >
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">图书管理系统</a>
</div>
<ul class="nav navbar-nav navbar-right maright">
<li><a><span class="badge colorred">5</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-off"></span> 退出</a></li>
</ul>
<!-- 左侧栏 -->
<div class="navbar-collapse" id="leftnav" ng-controller="booklist">
<ul class="nav">
<li>
<a data-target="#list" class="coloractive" data-toggle="collapse" aria-expanded="true">
<span class="glyphicon glyphicon-book"></span> 书籍类型
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</a>
<ul id="list" class="nav collapse listbg in" aria-expanded="true">
<li ng-repeat="book in booklist" ui-sref = "booklist({bookType:{{book.id}}})">
<a > <span class="glyphicon {{book.img}}"></span> {{book.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- 右侧 -->
<div class="page_mian">
<div class="container">
<div class="row ">
<div ui-view="bookgrid" class="col-xs-12">
<!--书籍列表加载中...-->
</div>
<div ui-view="addbook" class="col-xs-12">
<!--添加书籍-->
</div>
<div ui-view="seebook" class="col-xs-12">
<!--查看书籍-->
</div>
</div>
</div>
</div>
复制代码
转载于:https://www.cnblogs.com/songyunxinQQ529616136/p/6759645.html
http://www.cnblogs.com/qianmojing/p/6142178.html相关推荐
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
- angularjs 的笔记
angular.copy()深拷贝 angular提供了一个可以复制对象的api--copy(source,destination),它会对source对象执行深拷贝. 使用时需要注意下面几点: 如果 ...
- 使用Angularjs的ng-cloak指令避免页面乱码
在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...
- cnblogs和org2blog使用总结
<?xml version="1.0" encoding="utf-8"?> cnblogs和org2blog使用总结 cnblogs和org2bl ...
- JSON http://www.cnblogs.com/haippy/archive/2012/05/20/2509329.html
js: JSON.stringify(idinfo)//将对象转化为 JSON串 //查询后为将json串赋值给表单 function _form1_load() { AOS. ...
- 挖坑挖到cnblogs.com来...
这几年一直在cppblog.com上敲字, 因为开帖时满脑袋都是C++, 所以选了它~ 懒懒散散竟然也敲了四年多, 真是难得的有'毅力'啊- 回头看看这一年越来越不务正业了,C++越来越少, 到是当年 ...
- 博客园 cnblogs博客添加Google Analytics统计
在cnblogs的文章列表中只可以看到自己的每篇文章的页面浏览量,没有详细的统计信息.Google Analytics作为强大的统计工具,能得到几乎所有想要的统计信息,是博客不可多得的好工具,本文介绍 ...
- [总结]博客聚合-cnblogs,wordpress,live writer,word2010
一.url地址: cnblogs: http://BusyAnt.cnblogs.com/services/metaweblog.aspx wordpress: http://blog.busyant ...
- cnblogs不愧为cnblogs
在cnblogs落脚3天了,写了一些很实践的文章,很有成就感,为什么?我第一次为是否发表这篇文章而作出思考,以前在别的地方,总是转别人的文章居多,到了cnblogs,感受到了原创的精神--即使我的文章 ...
- 博客域名改为http://bobli.cnblogs.com
本博客的域名已修改为:http://bobli.cnblogs.com/ 原来的地址还可以进入,希望搜索引擎快点更新过来... 感谢博客园管理员的帮助,效率非常之高!
最新文章
- Zend Studio 默认模板和输入代码提示时间的修改方式
- Linux下MySQL 5.7 主从复制(主从同步)
- numpy 读取txt为array 一行搞定
- 2021技术文大盘点 | 打包过去，面向未来
- 蓝桥杯第八届省赛JAVA真题----正则问题
- Reactor网络编程模型
- 第二期： 如何搭建 多用户的平台？（未完）
- opencl初探-sobel检测
- getch函数的使用与说明
- Simulink之晶闸管（可控硅SCR）
- 变速恒频风电机组的优缺点_恒速和变速恒频风电系统简介
- c语言编程a4988驱动步进电机,A4988驱动NEMA步进电机(42步进电机)
- 浅析激光导航agv的市场前景
- autoit-v3 编辑工具SciTE Script Editor 解决中文乱码+中文换行崩溃问题
- 掘金茅台，三位投资客的暴富人生
- 安卓开发代码工程结构（2）
- 华为云sql工程师评测答题[青铜+白银]
- iOS开发中UIImageView逆时针旋转,并得到旋转后的图片
- U盘文件丢失求恢复教程
- cas112592-50-4/四溴苯基卟啉镍/nickel(II) tetra(p-Br-phenyl)porphyrin/分子式：C44H24Br4N4Ni++/分子量：986.99800