angular.js——小小记事本3
app.js部分，首先是路由。这个之前讲过了，链接在这里——
http://www.cnblogs.com/thestudy/p/5661556.html
var app = angular.module("myTodo", ['ngRoute']);
//路由的配置：
app.config(function($routeProvider) {
//我们在实现I want you项目，自己实现了一个路由，
//在这里angular.js帮我们实现了一个路由
var routeconfig = {
templateUrl: "body.html",
controller: "myTodoCtrl"
/*controller: 'myTodoCtrl'*/
}
var ohter_config = {
templateUrl: "other.html"
}
//如果路由没有匹配到hash，让它跳到body.html
//如果路由器配到的hash是index.html#/all 或者
//index.html#/comp index.html#/status
//假设路由器的匹配路径是 index.html#/!/allssssssssss
//会匹配失败，会通过otherwise,让它自动重定向到 index.html#/all
$routeProvider.
when("",routeconfig).
//status ： 它对应我们页面的hash: all completed active
//路由规则的优先级按写法的顺序所决定的
when("/other", ohter_config).
when("/:status_id", routeconfig ).
otherwise( { redirectTo: "/all" });
});
上面一段就是路由部分。事实上，这个网页主要的部分就是路由和各种方法，路由解决了，剩下的就好办多了。
首先，我们编写过滤器。因为剩下的各种功能的方法组件等都是独立的，所以基本上书写顺序无所谓。但是为了安全起见（忘了写，漏了写就尴尬了），这里按照网页从上往下的执行顺序，碰到什么写什么。
过滤器的代码是这个——
app.filter("createtimeSort", function(){
return function(list){
if(list) {
return list.sort(function(a, b){
return b.time - a.time;
});
}else {
return [];
}
}
});
app.filter("offset", function(){
return function(list){
var res = [];
}
})
过滤器使用的地方是这个——
<li ng-repeat="item in itemList|filter:filterStatus|createtimeSort track by $index" ....>
首先，第一个是遍历item in itemList，然后是第一个过滤器|filter:filterStatus，这个过滤器是写在后面的，通过判断filterStatus的对象来判断这个标签和内容是否应该隐藏——
$scope.$on('$routeChangeSuccess', function () {
//使用这个实时监听功能，是有条件，
//必须要配置路由器对象，才可以监听路由器的变化。
console.log('hash值改变了');
console.log($routeParams.status_id);
if($routeParams.status_id === "all") {
$scope.filterStatus = {};
$scope.routName = "all";
}else if($routeParams.status_id === "active") {
$scope.filterStatus = {completed:false};
$scope.routName = "active";
}else {
$scope.routName = "completed";
$scope.filterStatus = {completed:true};
}
//该功能可以实时监听该模块作用域下hash值的改变
});
当路由为all的时候，没有反应，直接跳过。
当路由为active的时候，留下｛completed:false｝，即complete属性为false的条目（这个属性后面介绍，所以才写在最下面的）
其余情况和上面一条相反，即留下｛completed:true｝的条目。
createtimeSort过滤器要求我们重新排列标签，【以保证刚输入的数据出现在最上面，然后依次向下】。
angular中要求条目不能有重复，如["aaa",’aaa","aaa"]，如果有标签repeate这个，就会报错。因为angular不能对他们进行唯一性的判断（即，不好追踪），于是最后的track by就是判断用的，判断的依据是$index，即索引变量，这个是唯一的。
接下来的：
function store(namespace, data) {
if(arguments.length > 1) {
localStorage.setItem(namespace, JSON.stringify(data));
}else {
var obj = localStorage.getItem(namespace);
return (obj && JSON.parse(obj)) || null
}
}
存储方法，中间有两个参数，第一个是参数的名字，第二个是值。参数会通过location方法存储起来。
app.directive('todoFocus', function(){
var linkFunction_nice = function(scope, element, attr) {
//console.log(attr, element);
scope.$watch(attr.todoFocus, function(newval){
setTimeout(function(){
element[0].focus();
//延迟执行，否则无法聚焦
}, 100);
});
};
return {
restrict: "A", //暴露的一个元素，若是‘A’则是属性
link: linkFunction_nice
};
})
这个是自定义指令todoFocus，作用是当我们双击了条目的时候，会出现光标闪烁，表示可以编辑。这个使用在这里——
<input todo-focus="item.edit_status" class="edit" ng-blur="saveEdit(item)" ng-model="item.title">
当"item.edit_status" 处于可编辑状态的时候，它会显示，读取条目内容。当失去焦点的时候，对内容进行保存 ng-blur="saveEdit(item)"。
接下来，就是控制器的书写了——
app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
$scope.itemList = store('mytodo') || itemList;//进行核心数据的绑定
$scope.routName = "all";
$scope.newTodo = '';
$scope.$watch("itemList", function(){
//$scope.remainCount = getRemainCount(itemList);// 计算未完成的任务数量
$scope.remainCount = $filter('filter')($scope.itemList, {
completed: false
}).length; // 计算未完成的任务数量
store('mytodo', $scope.itemList);
}, true);
$scope.saveEdit = function(obj){
console.log('失去焦点');
obj.edit_status = false;
}
$scope.remove = function(obj){
var index = $scope.itemList.indexOf(obj);
console.log('得到要删除对象的相应索引值:', index);
$scope.itemList.splice(index, 1);
}
$scope.editTodo = function(todo){
console.log('进行双击操作');
todo.edit_status = true;
}
$scope.markAll = function(status){
//全部选中的功能
$scope.itemList.forEach(function(obj, index){
if(obj.completed !== status) {
obj.completed = status;
}
//全选的交替操作
});
}
$scope.clearCompleted = function(){
//清楚所有的完成状态任务
$scope.itemList = $filter('filter')($scope.itemList, {
completed: false
});
}
$scope.addTodo = function(){
//console.log($scope.newTodo);
//console.log($scope.newTodotext);
//增加未完成的任务操作
if(!$scope.newTodo.trim()) {
return;
}
var Coreobj = {
//已完成
completed: false,
title: $scope.newTodo,
time: new Date().getTime()
}
$scope.itemList.push(Coreobj);
$scope.newTodo = '';
}
$scope.$on('$routeChangeSuccess', function () {
//使用这个实时监听功能，是有条件，
//必须要配置路由器对象，才可以监听路由器的变化。
console.log('hash值改变了');
console.log($routeParams.status_id);
if($routeParams.status_id === "all") {
$scope.filterStatus = {};
$scope.routName = "all";
}else if($routeParams.status_id === "active") {
$scope.filterStatus = {completed:false};
$scope.routName = "active";
}else {
$scope.routName = "completed";
$scope.filterStatus = {completed:true};
}
//该功能可以实时监听该模块作用域下hash值的改变
});
});
控制器分为两部分，数据部分和方法部分。
13行之前属于数据部分，主要进行各种定义和计算。如剩余任务个数计算
$scope.$watch("itemList", function(){
7 //$scope.remainCount = getRemainCount(itemList);// 计算未完成的任务数量
8 $scope.remainCount = $filter('filter')($scope.itemList, {
9 completed: false
10 }).length;
这个剩余任务的计算，是通过监听条目的变化进行触发的，过滤器方法输入后，将completed等于false的剔除，得到的一组新的数组，然后这个新的数组的长度便是未完成的任务数了。
剩下的方法就不作介绍了，非常简单。
最新文章
- 移动表格行 解决低版本IE fadeIn fadeOut 失效问题
- ThreadLocal的设计与使用（原理篇）
- FZU 2214 Knapsack problem（背包问题）
- Java基础类库
- 数据库设计(字段)中的char、varchar、text和nchar、nvarchar、ntext的区别
- 10个优秀的Objective-C和iOS开发在线视频教程
- 网络受限下，使用Nexus要解决的两个问题
- CRM Entity 之Money转string int类型等
- Lua获取网络时间
- WdatePicker默认日期为当天
- Python 爬取qqmusic音乐url并批量下载
- poj 3335 Rotating Scoreboard（半平面交）
- 【续】5年后，我们为什么要从 Entity Framework 转到 Dapper 工具？
- 采用Anaconda平台调用pymc3时出现错误的解决方法
- Ubuntu下软件安装的几种方式，apt，dpkg工具的使用
- python爬虫之Cookie
- python 面向对象(一)初识面向对象
- multipath配置详细参考
- 四旋翼基础算法学习2-IMU输入滤波算法
- 有人在群里问关于SQL表组合数据问题