此博客不再维护，博客已迁移至 https://github.com/purplebamboo/blog/issues

By purplebamboo

更新日期:

文章目录
  1. 1. 删除功能
  2. 2. 增加功能的实现
  3. 3. 修改的实现
  4. 4. 结语

这一章用来实现博客的增删改。

删除功能

删除很简单，只需要操作$scope的数据对象就行。

首先我们在html里面加上 ng-click这个Directive。这个东西会给dom节点增加一个事件监听。如下：

1
2
3
4
5
6
7

<ul class="list">
          <li ng-repeat="post in list | filter:search">
            <span style="color:#000;font-size:20px;">※{{post.title}}</span>
             <a href="javascript:;" ng-click="del(post.id)">删除</a>
            <div>{{post.content}}</div>
          </li>
        </ul>

这样 点击删除这个链接时，angular就会帮你调用 $scope上的del这个方法，我们来看看这个方法的定义;

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

Post.controller('postCtrl', ['$scope', function($scope) {
        $scope.list = [{
          id:1,
          title:"好无聊啊！！！",
          content:"今天好无聊！！"
        },{
          id:2,
          title:"生日了！！！",
          content:"今天生日啦！！！！"
        }];

        $scope.del = function(id){
          var index = -1;
          for (var i = 0; i < $scope.list.length; i++) {
            if ($scope.list[i]['id'] == id) {
              index = i;
              break;
            };
          
          }
          $scope.list.splice(index,1);
        };
    }]);

这边为了方便删除，我给每个文章的数据都加了个id，用来标示。
del的操作就是找到当前要删除的那个文章在 $scope.list的索引index然后通过splice删除。只要更新了$scope.list，相应的html会自动更新，瞬间删除的功能就完成了。方便吧。

增加功能的实现

增加也很简单，直接往$scope.list里面插入个数据就好了。代码如下:

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

<!doctype html>
<html >
  <head>
    <meta charset="utf-8">
    <script src="angular.js"></script>
    <script type="text/javascript">
    var Post = angular.module('posts',[]);
 
    Post.controller('postCtrl', ['$scope', function($scope) {
        $scope.list = [{
          id:1,
          title:"好无聊啊！！！",
          content:"今天好无聊！！"
        },{
          id:2,
          title:"生日了！！！",
          content:"今天生日啦！！！！"
        }];

        $scope.del = function(id){
         ......
        };


        $scope.add = function(){
          $scope.manageShow =1;
          $scope.manageId=-1;
        }

        $scope.manage =function(){
          //>0代表编辑 -1代表增加
          if ($scope.manageId==-1) {
            var id = $scope.list.length;
            var obj = {
              id:id,
              title:$scope.curTitle,
              content:$scope.curContent
            }
            $scope.list.push(obj);
          }
        }

    }]);
    </script>
    <style type="text/css">
....

    </style>
  </head>
  <body>
    <div class="wrap" ng-app="posts">
      <h2>文章列表</h2>
      <div ng-controller="postCtrl">   
      <input type="text" ng-model="search" class="search" placeholder="Search">    
        <ul class="list">
          <li ng-repeat="post in list | filter:search">
            <span style="color:#000;font-size:20px;">※{{post.title}}</span>
             <a href="javascript:;" ng-click="del(post.id)">删除</a>
            
            <div>{{post.content}}</div>
          </li>
        </ul>
        <button ng-click="add()">点我增加</button>

      <div class="post_manage" ng-show="manageShow">
        标题:<input type="text" ng-model="curTitle" value="{{curTitle}}"/>
        内容:<input type="text" ng-model="curContent" value="{{curContent}}"/>
        <a href="javascript:;" ng-click="manage()">确定</a>
      </div>
      </div>
    </div>
  </body>
</html>

首先是html

1
2
3
4
5
6

<button ng-click="add()">点我增加</button>
      <div class="post_manage" ng-show="manageShow">
        标题:<input type="text" ng-model="curTitle" value="{{curTitle}}"/>
        内容:<input type="text" ng-model="curContent" value="{{curContent}}"/>
        <a href="javascript:;" ng-click="manage()">确定</a>
      </div>

加一个button点击后调用add函数，add函数就做了两件事，将 $scope.manageShow设为1，将 $scope.manageId设为-1。
首先$scope.manageShow是为下面的

1

 <div class="post_manage" ng-show="manageShow">

服务的。ng-show=”manageShow”的机制是这样的。当$scope.manageShow的值为非true的值时就会给当前的dom节点增加一个class => ng-hide 并且这个class被angular设成了。.ng-hide {display: none !important;},也就是说只有$scope.manageShow为true类型的值时，这个dom才会显示出来。
将 $scope.manageId设为-1。是为了告诉后面的manage函数，现在做的是增加文章的操作。

修改的实现

跟增加差不多，增加下面这些代码：

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

<!doctype html>
<html >
  <head>
    <meta charset="utf-8">
    <script src="angular.js"></script>
    <script type="text/javascript">
    var Post = angular.module('posts',[]);
 
    Post.controller('postCtrl', ['$scope', function($scope) {
        $scope.list = [{
          id:1,
          title:"好无聊啊！！！",
          content:"今天好无聊！！"
        },{
          id:2,
          title:"生日了！！！",
          content:"今天生日啦！！！！"
        }];

        $scope.del = function(id){
         .....
        };


        $scope.add = function(){
          $scope.manageShow =1;
          $scope.manageId=-1;
        }

        $scope.update = function(id){
          $scope.manageShow =1;
          $scope.manageId=id;

          for (var i = 0; i < $scope.list.length; i++) {
            if ($scope.list[i]['id'] == id) {
              $scope.curTitle = $scope.list[i]['title'];
              $scope.curContent = $scope.list[i]['content'];
              break;
            };
          
          }
          
        }

        $scope.manage =function(){
          //>0代表编辑 -1代表增加
          if ($scope.manageId==-1) {
            var id = $scope.list.length;
            var obj = {
              id:id,
              title:$scope.curTitle,
              content:$scope.curContent
            }
            $scope.list.push(obj);
          }else{
            var id = $scope.manageId;
            var obj = {
              id:id,
              title:$scope.curTitle,
              content:$scope.curContent
            }

            for (var i = 0; i < $scope.list.length; i++) {
              if ($scope.list[i]['id'] == id) {
                $scope.list[i] = obj;
                break;
              };
            
            }

          }
        }

    }]);
    </script>
    <style type="text/css">

  ....
    </style>
  </head>
  <body>
    <div class="wrap" ng-app="posts">
      <h2>文章列表</h2>
      <div ng-controller="postCtrl">   
      <input type="text" ng-model="search" class="search" placeholder="Search">    
        <ul class="list">
          <li ng-repeat="post in list | filter:search">
            <span style="color:#000;font-size:20px;">※{{post.title}}</span>
             <a href="javascript:;" ng-click="del(post.id)">删除</a>
             <a href="javascript:;" ng-click="update(post.id)">编辑</a>
            <div>{{post.content}}</div>
          </li>
        </ul>
        <button ng-click="add()">点我增加</button>

      <div class="post_manage" ng-show="manageShow">
        标题:<input type="text" ng-model="curTitle" value="{{curTitle}}"/>
        内容:<input type="text" ng-model="curContent" value="{{curContent}}"/>
        <a href="javascript:;" ng-click="manage()">确定</a>
      </div>
      </div>
    </div>
  </body>
</html>

增加一个编辑按钮，点击调用update方法，然后设置manageShow打开下面的框，同时设置id，根据id筛选出数据，赋值curTitle curContent，设置完后，下面的那个div就会自动更新。这样点击确定后 manage会知道是在更新，于是检索后设置新的值。之后的html自动更新，一切就这么简单。

结语

这样一个简单的文章发布系统就好了，可以看到非常方便快捷。几乎不再需要dom操作，一切只要更新数据就好了。
下面我会开始一个个介绍angular里的各种技术概念，然后不断的将新的概念融入到这个小例子里。最终实现一套高端大气上档次的博客系统，敬请期待。

下面给出完整的一份代码：

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

<!doctype html>
<html >
  <head>
    <meta charset="utf-8">
    <script src="angular.js"></script>
    <script type="text/javascript">
    var Post = angular.module('posts',[]);
 
    Post.controller('postCtrl', ['$scope', function($scope) {
        $scope.list = [{
          id:1,
          title:"好无聊啊！！！",
          content:"今天好无聊！！"
        },{
          id:2,
          title:"生日了！！！",
          content:"今天生日啦！！！！"
        }];

        $scope.del = function(id){
          var index = -1;
          for (var i = 0; i < $scope.list.length; i++) {
            if ($scope.list[i]['id'] == id) {
              index = i;
              break;
            };
          
          }
          $scope.list.splice(index,1);
        };


        $scope.add = function(){
          $scope.manageShow =1;
          $scope.manageId=-1;
          $scope.curTitle = "";
          $scope.curContent = "";

        }

        $scope.update = function(id){
          $scope.manageShow =1;
          $scope.manageId=id;

          for (var i = 0; i < $scope.list.length; i++) {
            if ($scope.list[i]['id'] == id) {
              $scope.curTitle = $scope.list[i]['title'];
              $scope.curContent = $scope.list[i]['content'];
              break;
            };
          
          }
          
        }

        $scope.manage =function(){
          //>0代表编辑 -1代表增加
          if ($scope.manageId==-1) {
            var id = $scope.list.length;
            var obj = {
              id:id,
              title:$scope.curTitle,
              content:$scope.curContent
            }
            $scope.list.push(obj);
          }else{
            var id = $scope.manageId;
            var obj = {
              id:id,
              title:$scope.curTitle,
              content:$scope.curContent
            }

            for (var i = 0; i < $scope.list.length; i++) {
              if ($scope.list[i]['id'] == id) {
                $scope.list[i] = obj;
                break;
              };
            
            }

          }
          $scope.manageShow = 0;
        }

    }]);
    </script>
    <style type="text/css">

    .wrap{
      margin: 0 auto;
      width: 500px;
    }
    .search{
      border-radius: 5px;
      border: 1px solid #999;
      width: 200px;
    }
    .list{
      width: 200px;
      padding-left: 0px;
    }
    .list li{
      list-style: none;
      margin-bottom: 20px;
      color: #000;
      width: 300px;
    }
    .list li span{
      color: #666;
      font-size: 16px;
      font-weight: bold;

      
    }
    .list li div{
      padding-top: 10px;
      color: #999;
      font-size: 14px;
    }


    </style>
  </head>
  <body>
    <div class="wrap" ng-app="posts">
      <h2>文章列表</h2>
      <div ng-controller="postCtrl">   
      <input type="text" ng-model="search" class="search" placeholder="Search">    
        <ul class="list">
          <li ng-repeat="post in list | filter:search">
            <span style="color:#000;font-size:20px;">※{{post.title}}</span>
             <a href="javascript:;" ng-click="del(post.id)">删除</a>
             <a href="javascript:;" ng-click="update(post.id)">编辑</a>
            <div>{{post.content}}</div>
          </li>
        </ul>
        <button ng-click="add()">点我增加</button>

      <div class="post_manage" ng-show="manageShow">
        标题:<input type="text" ng-model="curTitle" value="{{curTitle}}"/>
        内容:<input type="text" ng-model="curContent" value="{{curContent}}"/>
        <a href="javascript:;" ng-click="manage()">确定</a>
      </div>
      </div>
    </div>
  </body>
</html>
文章目录
  1. 1. 删除功能
  2. 2. 增加功能的实现
  3. 3. 修改的实现
  4. 4. 结语