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的剔除,得到的一组新的数组,然后这个新的数组的长度便是未完成的任务数了。
剩下的方法就不作介绍了,非常简单。
angular.js——小小记事本3的更多相关文章
- angular项目——小小记事本2
一,路由的规划. 需要模拟的页面有三个:all,active,conplete. 首先,写好铺垫需要的各种东西,重要的组件的引用等—— 这里我们会将index.html设为主页,将body.html加 ...
- angular项目——小小记事本1
这次的项目是制作一个记事本,有点类似于手机qq聊天信息. 内容:在一个input当中输入一行数据,之后提交,这个数据便会记录在下面.随着提交的增加,数据会以列表形式排列下来. 列表中,前面有一个组件, ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe
angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...
- (翻译)Angular.js为什么如此火呢?
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- angular.js写法不规范导致错误
以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...
- Angular.js实现折叠按钮的经典指令.
var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...
- Angular.js通过bootstrap实现经典的表单提交
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...
- python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
随机推荐
- EntityFramework批量Insert
先说解决办法:使用SqlBulkCopy. 然后问题是:这个和EF没有半点关系,还要拼DataSet. 再是解决办法:你可以自己封装一个,也可以使用人家写好的 EntityFramework.Bulk ...
- nginx的https环境如何配置
http://www.cnblogs.com/yanghuahui/archive/2012/06/25/2561568.html http://www.fzb.me/2015-1-15-openss ...
- win8.1和centos6.5 双系统启动问题
笔记本系统为centos 6.5,由grub引导启动,安装了win 8.1后,开机直接进入win 8.1,没有出现centos6.5 引导项,解决办法: 一.开机按ESC键进入启动顺序菜单,选择cen ...
- /home 和 /root
/root Linux超级权限用户root的家目录./home 如果我们建立一个用户,用户名是"xx",那么在/home目录下就有一个对应的/home/xx路径,用来存放用 ...
- ndk搭建与运行
1)打开Android开发者的官网http://developer.android.com/找到Develop点击.如果页面打不开,通过代理来访问. 2)进入后再点击Tools 3)进入后在左侧找到N ...
- Android Game Examples
Game2 using UnityEngine; using System.Collections; public class Game2_Player : MonoBehaviour { publi ...
- linux 安装Gauss09 GaussView
- JavaScript中prompt()函数的用法。
定义和用法 prompt()方法用于显示一个带有提示信息,并且用户可以输入的对话框. 语法 prompt(text,defaultText); 参数 描述 text 可选.要在对话框中显示的提示信息( ...
- C#中ref和out的区别浅析
这篇文章主要介绍了C#中ref和out的区别浅析,当一个方法需要返回多个值的时候,就需要用到ref和out,那么这两个方法区别在哪儿呢,需要的朋友可以参考下 在C#中通过使用方法来获取返回值时,通 ...
- iOS开发QQ空间半透明效果的实现
//1.首先我们可以确定的是cell的半透明, /* white The grayscale value of the color object, specified as a value from ...