Angular.js框架_angularjs

作者：繁依Fanyi0 | 2024-05-12 05:17:13

踩

angularjs

Angular.js

一.angularjs入门笔记

1. AngularJS是什么?
	* Google开源的 前端JS 结构化 框架
	* 动态展示页面数据, 并与用户进行交互
	* AngularJS特性(优点)
		* 双向数据绑定
		* 声明式依赖注入
		* 解耦应用逻辑, 数据模型和视图
		* 完善的页面指令
		* 定制表单验证
		* Ajax封装
2. HelloWorld
	* 导入angular.js, 并在页面中引入
	* 在<html><body>中ng-app指令
	* 定义ng-model='xxx'/{{xxx}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

二.四个重要概念

1. **双向数据绑定**
	* View（视图）： 页面（标签、指令，表达式）
	* Model(模型) ：作用域对象（属性、方法）
	* 数据绑定： 数据从一个位置自动流向另一个位置
		* View-->Model
		* Model-->View
	* 单向数据绑定： 只支持一个方向
		* View-->Model  ： ng-init
		* Model-->View  : {{name}}
	* 双向数据绑定
		* Model<-->View  : ng-model
	* angular是支持双向数据绑定的
2. **依赖注入**
	* 依赖的对象被别人(调用者)自动注入进入
	* 注入的方式;
		* 内部自建：不动态 
		* 全局变量：污染全局环境
		* 形参：这种最好
	* angualr就是通过声明式依赖注入， 来得到作用域对象 
	* 形参名不能随便定义（只是针对当前这种写法）
3. ** MVC模式**
  * **M: Model, 即模型**, 在angular中: 
    * 为scope
    * 储存数据的容器
    * 提供操作数据的方法
  * **V: View, 即视图**, 在angular中:
    * 为页面
    * 包括: html/css/directive/expression
    * 显示Model的数据
    * 将数据同步到Model
    * 与用户交互
  * **C: Controller, 即控制器**, 在angular中:
    * 为angular的Controller
    * 初始化Model数据
    * 为Model添加行为方法
4. **MVVM模式**
  * M: Model, 即数据模型, 在angular中:
    * 为scope中的各个数据对象
  * V: View, 即视图, 在angular中:
    * 为页面
  * VM: ViewModel, 即视图模型, 在angular中:
    * 为scope对象
  * 在angular中controller不再是架构的核心，在MVVM中只是起辅助作用，用来辅助$scope对象，即VM层
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

三.四个重要对象

1. **作用域**
	* 是一个js实例对象
	* 这个对象的属性、方法， 页面都可以直接引用、操作
	* ng-app指令： 内部创建一个根作用域（$rootScope）, 是所有其它作用域的父对象
2. **控制器**
	* 也是一个对象，是我们View与Model之间的桥梁
	* 当我们使用了ng-controller指令， 内部就会创建控制器对象
	* 但我们同时得提供控制器的构造函数（必须定义一个$scope的形参）
	* 每定义一个ng-controller指令， 内部就会创建一个新的作用域对象（$scope）, 并自动注入构造函数中,在函数内部可以直接使用$scope对象。
3. **模块**
	* 也是一个对象
	* 创建模块对象： angular.module('模块名', [依赖的模块])
	* 通过模块添加控制器：
	    * module.controller('MyController', function($scope){//操作$scope的语句})
	* angular的整体设计也是多模块的
		* 核心模块： angular.js
		* 扩展模块： angular-router.js, angular-message.js, angular-animate.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

四.三个页面语法

1. **表达式**
	* {{js表达式}}
	* 从作用域对象中读取对应的属性数据来显示数据
	* 不支持if/for/while
	* 支持三目表达式
2. **指令**
	* 什么指令 ： 自定义标签属性/标签
	* 常用的指令：
		* ng-app: 指定模块名，angular管理的区域
		* ng-model： 双向绑定，输入相关标签
		* ng-init： 初始化数据
		* ng-click： 调用作用域对象的方法（点击时）
		  可以传$event
		* ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
		* ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
		* ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
			* $index, $first, $last, $middle, $odd, $even
		* ng-show: 布尔类型， 如果为true才显示
		* ng-hide: 布尔类型， 如果为true就隐藏
		* ng-class: 动态引用定义的样式  {aClass:true, bClass:false}
    * ng-style: 动态引用通过js指定的样式对象   {color:'red', background:'blue'}
    * ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
    * ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
3. **过滤器**
	* 作用: 在显示数据时可以对数据进行格式化或过滤
		* 单个--->格式化（将别的类型的数据转换为特定格式的字符串）
		* 多个----》格式化/过滤
		* 不会真正改变被操作数据
	* {{express | 过滤器名：补充说明}}
	* 常用过滤器：
		* currency 货币格式化(文本)
		* number数值格式化(文本)
		* date 将日期对象格式化(文本)
		* json: 将js对象格式化为json(文本)
		* lowercase : 将字符串格式化为全小写(文本)
		* uppercase : 将字符串格式化全大写(文本)

		* limitTo 从一个数组或字符串中过滤出一个新的数组或字符串
			* limitTo : 3  limitTo : -3
		* orderBy : 根据指定作用域属性对数组进行排序
			* {{[2,1,4,3] | orderBy}}  升序
			* {{[2,1,4,3] | orderBy：‘-’}}  降序
			* {{[{id:2,price:3}, {id:1, price:4}] | orderBy:'id'}  id升序
			* {{[{id:2,price:3}, {id:1, price:4}] | orderBy:'-price'} price降序
		* filter : 从数组中过滤返回一个新数组
			* {{[{id:22,price:35}, {id:23, price:45}] | filter:{id:'3'}} //根据id过滤
			* {{[{id:22,price:35}, {id:23, price:45}] | filter:{$:'3'}} //根据所有字段过滤
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

五.jQuery实现

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

<input type="text" id="name">
<p>您输入的内容是：<span id="contentSpan"></span></p>

<script type="text/javascript" src="../../js/jquery/jquery-1.11.1.js"></script>
<script type="text/javascript">
  $(function () {
      $('#name').keyup(function () {
          var name = this.value;
          $('#contentSpan').html(name);
      })
  })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

六.第一个Angular程序

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-app>

<!--
  ng-app(指令) : 告诉angular核心它管理当前标签所包含的整个区域,并且会自动创建$rootScope根作用域对象
  ng-model : 将当前输入框的值与谁关联(属性名:属性值), 并作为当前作用域对象($rootScope)的属性
  {{}} (表达式) : 显示数据,从作用域对象的指定属性名上取

  1、表达式：通常有一个返回值，可以放在任何需要值得地方，比如函数调用的参数，一个变量名，一个运算，

  2、语句：通常表示一个完整的执行单位，一段完整的js可执行的代码，有的语句也可以用表达式来执行，叫做表达式语句。

  3、区别：语句用分号结尾，有些语句我们没有加封号，比如console.log虽然我们没有加封号，但也是语句，因为js引擎会自动解析并且加上封号。
  js引擎在解析的时候会自动的加上封号

  4、特例：if语句，就不用加分号  可也是完整的语句。
-->

<input type="text" ng-model="username">
<p>您输入的内容是：<span>{{username}}</span></p>
<script src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">

</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

七.双向数据绑定

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>02_(双向)数据绑定</title>
</head>
<body ng-app="" ng-init="name='tom'">

<!--
1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成
2. 双向数据绑定: 数据可以从View(视图层)流向Model（模型）, 也可以从Model流向View
  * 视图(View): 也就是我们的页面(主要是Angular指令和表达式)
  * 模型(Model) : 作用域对象(当前为$rootScope), 它可以包含一些属性或方法
  * 当改变View中的数据, Model对象的对应属性也会随之改变:  ng-model指令  数据从View==>Model
  * 当Model域对象的属性发生改变时, 页面对应数据随之更新:  {{}}表达式  数据从Model==>View
  * ng-model是双向数据绑定, 而{{}}是单向数据绑定
3.ng-init  用来初始化当前作用域变量。
-->
<input type="text" ng-model="name">
<p>姓名1：{{name}}</p>
<input type="text" ng-model="name">
<p>姓名2：{{name}}</p>

<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

八.依赖注入

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>

<body ng-app="">
<!--
    * 依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。
    * 依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是依赖注入。
    * angular的 ‘$scope’对象就是依赖对象，并且是依赖注入的形式进行使用。
      ！！！形参必须是特定的名称, 否则Angular无法注入抛异常

    * 回调函数的event的就是依赖对象
    * 回调函数有形参就是依赖注入
-->
<div ng-controller="MyController">
  <input type="text" placeholder="姓" ng-model="firstName">
  <input type="text" placeholder="名" ng-model="lastName">

  <p>输入的姓名为: {{firstName+'-'+lastName}}</p>
  <p>输入的姓名2为: {{getName()}}</p>
</div>

<div>
  {{firstName}} <!--不能显示-->
</div>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
  function MyController ($scope) {//必须是$scope, $scope就是依赖对象, 被angular动态注入的
    $scope.firstName = 'KB';
    $scope.lastName = 'Brent';

    //给域对象指定方法
    $scope.getName = function() {
      return $scope.firstName + "  " + $scope.lastName;
    };
    console.log($scope.age);

    //声明式和命令式的区别
    //1.命令式：命令程序执行的时候每一步都是按照自己的指令，更注重执行的过程
    //2.声明式：更注重执行的结果。
    //命令式
    var arr = [1,2,3,4,5];
    var newArr = [];
    for(var i=0;i<arr.length;i++){
      var num = arr[i]*2;
      newArr.push(num);
    }
    console.log(newArr);

    //声明式
    var newArr2 = arr.map(function (item) {
      return item*2;
    });
    console.log(newArr2);
    //命令式更注重的执行的过程
    //声明式更注重的执行的结果
    //声明式是对命令式的局部包装
    //解答题与填空题的区别
  }
</script>

<script type="text/javascript">

</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

九.作用域与控制器

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-app="" ng-init="age=12">
<!--
1. 作用域对象     :
  * 一个js实例对象, ng-app指令默认会创建一个根作用域对象($rootScope)
  * 它的属性和方法与页面中的指令或表达式是关联的
2. 控制器:
  * 用来控制AngularJS应用数据的 实例对象
  * ng-controller : 指定控制器构造函数, Angular会自动new此函数创建控制器对象
  * 同时Angular还有创建一个新的域对象$scope, 它是$rootScope的子对象
  * 在控制器函数中声明$scope形参, Angular会自动将$scope传入
-->
<div ng-controller="MyController">
  <input type="text" placeholder="姓" ng-model="firstName">
  <input type="text" placeholder="名" ng-model="lastName">

  <p>输入的姓名为: {{firstName+'-'+lastName}}</p>
  <p>输入的姓名2为: {{getName()}}</p>
</div>

<div>
  {{firstName}} <!--不能显示-->
</div>

<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
  function MyController ($scope) {//必须是$scope
    // alert(this instanceof MyController);//说明是new调用
    $scope.firstName = 'KB';
    $scope.lastName = 'Brent';

    //给域对象指定方法
    $scope.getName = function() {
      return $scope.firstName + "  " + $scope.lastName;
    };

    console.log($scope.age);
  }
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

十.模块和控制器

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-app="MyApp">

<div ng-controller="MyCtrl">
  <input type="text" ng-model="empName">
  <p>员工名:{{empName}}</p>
</div>

<div ng-controller="MyCtrl1">
  <input type="text" ng-model="empName">
  <p>员工:{{empName}}</p>
</div>



<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
   console.log(angular,typeof angular);
   //创建当前应用的模块对象
     var module = angular.module('MyApp',[]);
     module.controller('MyCtrl',function ($scope) {
           $scope.empName = 'Tom';
     });
   module.controller('MyCtrl1',function ($scope) {
       $scope.empName = 'Jack';
   })

    方法链调用
   angular.module('MyApp',[])//模块对象的方法执行完返回的就是模块对象本身
           .controller('MyCtrl',function ($scope) {//$scope写法问题（js代码压缩时会把所有的局部变量压缩成abcd等）
               $scope.empName = 'Tom';
           }).controller('MyCtrl1',function ($scope) {
               $scope.empName = 'Jack';
           })
    /*
    上面写法的问题：
        1、形参只能写固定的变量名$scope;
        2、一旦文件压缩，将不能使用，会报错。
     */
    //改进
    angular.module('MyApp',[])
            .controller('MyCtrl',['$scope',function (a) {
                a.empName = 'tom'
            }])
            .controller('MyCtrl1',['$scope',function (b) {
                b.empName = 'Jack';
            }])
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

十一.表达式

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-app="">
<!--
1. 使用Angular表达式:
  * 语法: {{expression}}
  * 作用: 显示表达式的结果数据
  * 注意: 表达式中引用的变量必须是当前域对象有的属性(包括其原型属性)
2. 操作的数据
  * 基本类型数据: number/string/boolean
  * undefined, Infinity, NaN, null解析为空串: "", 不显示任何效果
  * 对象的属性或方法
  * 数组
-->

<p>{{1}}</p>
<p>{{'尚硅谷'}}</p>
<p>{{undefined}}</p>
<p>{{'atguigu'+3}}</p>
<p>{{4+3}}</p>
<p>{{true}}</p>

<p ng-init="a=3;b=4">{{a+b}}</p>

<p ng-init="p={name:'Tom',age:12};arr=[true, 3, 'atguigu']">{{p.name}}---{{p.age}}----{{arr[2]}}</p>

</body>
<script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

十二.常用指令1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<!--
1. Angular指令
	* Angular为HTML页面扩展的: 自定义标签属性或标签
	* 与Angular的作用域对象(scope)交互,扩展页面的动态表现力
2. 常用指令(一)
  * ng-app: 指定模块名，angular管理的区域
  * ng-model： 双向绑定，输入相关标签
  * ng-init： 初始化数据
  * ng-click： 调用作用域对象的方法（点击时）
  * ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
  * ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
  * ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
    * $index, $first, $last, $middle, $odd, $even
  * ng-show: 布尔类型， 如果为true才显示
  * ng-hide: 布尔类型， 如果为true就隐藏
-->

<body ng-app="myApp" >

<div ng-controller="MyCtrl" ng-init="age=12">

    <div>
        <h2>价格计算器(自动)</h2>

        数量：<input type="number" ng-model="count1">

        价格：<input type="number" ng-model="price1">

        <p>总计：{{count1 * price1}}</p>
    </div>

    <div>
        <h2>价格计算器(手动)</h2>

        数量：<input type="number2" ng-model="count2">

        价格：<input type="number2" ng-model="price2">
        <button ng-click="getTotalPrice">计算</button>

        <p>总计：{{totalPrice}}</p>
    </div>

    <!--
    * ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
        * $index, $first, $last, $middle, $odd, $even
    -->
    <h3>人员信息列表</h3>
    <ul>
        <li ng-repeat="person in persons">偶数行：{{$even}},奇数行{{$odd}},中间的：{{$middle}},最后一个：{{$last}},第一个：{{$first}},第{{$index + 1}}个，{{person.name}}----{{person.age}}</li>
    </ul>

    <!--
    * ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
    -->
    <!--当使用ng-bind的时候表达式不在生效-->
    <p ng-bind="count2">{{'asdfdsfds'}}</p>
    <p>{{count2}}</p>
    <!--
      * ng-show: 布尔类型， 如果为true才显示
      * ng-hide: 布尔类型， 如果为true就隐藏
    -->
    <!--<button ng-click="switch()">切换</button>-->
    <!--<p ng-show="isLike">我爱范冰冰</p>-->
    <!--<p ng-hide="isLike">范冰冰爱我</p>-->
    <button ng-click="switch()">切换</button>
    <p ng-show="isLike">我喜欢贾静雯</p>
    <p ng-hide="isLike">贾静雯喜欢我</p>

</div>
<script type='text/javascript' src='../../js/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
    /*
     *  * ng-app: 指定模块名，angular管理的区域
     * ng-model： 双向绑定，输入相关标签
     * ng-init： 初始化数据
     * ng-click： 调用作用域对象的方法（点击时）
     * ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
     * */
    //创建模块对象
    angular.module('myApp', [])
            .controller('MyCtrl', ['$scope', function ($scope) {

                $scope.count1 = 1;
                $scope.price1 = 20;
                $scope.count2 = 1;
                $scope.price2 = 10;
                $scope.totalPrice = $scope.count2 * $scope.price2;
                $scope.getTotalPrice = function () {
                    $scope.totalPrice = $scope.count2 * $scope.count2;
                };

                $scope.persons = [
                    {name : 'kobe', age : 39},
                    {name : 'anverson', age : 41},
                    {name : 'weide', age : 38},
                    {name : 'tim', age : 40},
                    {name : 'curry', age : 29}

                ];
                $scope.isLike = true;
                $scope.switch = function () {
                    $scope.isLike = !$scope.isLike;
                }
            }])
</script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

十三.常用指令2

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<!--
常用指令(二)
  * ng-class: 动态引用定义的样式  {aClass:true, bClass:false}
  * ng-style: 动态引用通过js指定的样式对象   {color:'red', background:'blue'}
  * ng-click: 点击监听, 值为函数调用, 可以传$event
  * ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
  * ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
-->
<style>
  .evenB {
    background-color: grey;
  }

  .oddB {
    background-color: green;
  }
</style>
<body ng-app="myApp" ng-controller="MyController">

<div style="width: 100px;height: 100px;background-color: red"
     ng-mouseover="over()" ng-mouseleave="leave()" ng-style="myStyle">
</div>
<div>
  <ul>
      <li ng-repeat="p in persons" ng-class="{evenB:$even, oddB:$odd}">
        {{p.name}}---{{p.age}}
      </li>
  </ul>
</div>

<script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
  angular.module('myApp', [])
      .controller('MyController', function ($scope) {
        $scope.over = function () {
          $scope.myStyle = {
            background: 'blue'
          };
        };
        $scope.leave = function () {
          $scope.myStyle = {
            background: 'green'
          };
        };

        $scope.persons = [
          {name: 'Tom', age: 12},
          {name: 'Tom2', age: 13},
          {name: 'Tom3', age: 14},
          {name: 'Tom4', age: 15},
          {name: 'Tom5', age: 16}
        ];
      });
</script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

十四.我的笔记

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    textarea{
      resize: none;
    }
  </style>
</head>
<body ng-app="noteApp" ng-controller="NoteController">

<h2>我的笔记</h2>
<textarea cols="30" rows="10" ng-model="message"></textarea>
<div>
  <button ng-click="save()">保存</button>
  <button ng-click="read()">读取</button>
  <button ng-click="delete()">删除</button>
</div>
<p>剩余字数：{{getCount()}}</p>

<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

angular.module('noteApp', [])
    .controller('NoteController', function ($scope) {
        //console.log($scope.message);
        $scope.message = '';
        //定义获取剩余字数的方法
        $scope.getCount = function () {
            //判断输入数据的长度
            if(this.message.length > 100){
                $scope.message = $scope.message.slice(0, 100);
            }
            //返回剩余字数的个数
            return 100 - $scope.message.length;
        };

        //定义保存的方法
        $scope.save = function () {
            alert('note is saved');
            //将数据保存到sessionStorage中
            sessionStorage.setItem('note_key', JSON.stringify($scope.message));
            //将输入内容清空
            $scope.message = '';
        };
        //定义读取的方法
        $scope.read = function () {
            $scope.message = JSON.parse(sessionStorage.getItem('note_key') || '[]');//对读取null做了处理
        };

        // 定义删除的方法
        $scope.delete = function () {
            $scope.message = '';
        };

    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

十五.我的备忘录

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="todoApp" >

<div ng-controller="TodoControl">
    <h2>我的备忘录</h2>
    <div>
        <input type="text" ng-model="newTodo">
        <button ng-click="add()">新增</button>
    </div>
    <div ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.isChecked">
        <span>{{todo.todo}}</span>
    </div>
    <button ng-click="delete()">删除选中的记录</button>
</div>



<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

angular.module('todoApp', [])
	.controller('TodoControl', function ($scope) {
		//初始化数据
		$scope.todos = [
			{todo : '吃饭', isChecked : false},
			{todo : '睡觉', isChecked : false},
			{todo : '打豆豆', isChecked : false}
		];

		//定义添加todo的方法
		$scope.add = function () {
			//判断添加的内容是否为空
			if(!$scope.newTodo){
				alert('输入的内容不能空');
				return
			}
			// 组合新的todo对象
			var todo = {
				todo : $scope.newTodo,
				isChecked : false
			};
			// 将新的对象添加到todos中
			$scope.todos.unshift(todo);
			//添加完将输入的内容清空
			$scope.newTodo = '';
		};

		//定义删除  todo 的方法
		$scope.delete = function () {
			//将$scope.todo的数据暂时保存
			var oldTodo = $scope.todos;
			//将$scope.todos的数据清空
			$scope.todos = [];
			//进行遍历
			oldTodo.forEach(function (item, index) {
				//将没被选中的todo添加到 $scope.todos 数组中
				if(!item.isChecked){
					$scope.todos.push(item);
				}
			});
		}
	});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/557732