angularJs数据动态展示，新增，删除

angularJs数据动态展示

?
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJs数据动态展示</title>
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    </head>
    <body ng-app="myApp">
        <div ng-controller="myCtrl">
            <h2>我的私有备忘录</h2>
            <div>
                <input type="text" />
                <button>添加</button>
            </div>
            <div ng-repeat="todo in todos">
                <input type="checkbox" ng-model="todo.isChecked"  />
                <span>{{todo.name}}</span>
            </div>
            <button>删除选中的记录</button>
        </div>
         
    </body>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
     
    <script>
        angular.module('myApp',[])
          .controller('myCtrl',function($scope){
              $scope.todos=[
              {name:'吃饭',isChecked:false},
              {name:'睡觉',isChecked:false},
              {name:'打豆豆',isChecked:false}
              ]
          })
    </script>
</html>

　　

 

 angularJs数据添加

?
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJs添加</title>
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    </head>
    <body ng-app="myApp">
        <div ng-controller="myCtrl">
            <h2>我的私有备忘录</h2>
            <div>
                <input type="text" ng-model="newData" />
                <button ng-click="add()">添加</button>
            </div>
            <div ng-repeat="todo in todos">
                <input type="checkbox" ng-model="todo.isChecked"  />
                <span>{{todo.name}}</span>
            </div>
            <button>删除选中的记录</button>
        </div>
         
    </body>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
     
    <script>
        angular.module('myApp',[])
          .controller('myCtrl',function($scope){
              $scope.todos=[
              {name:'吃饭',isChecked:false},
              {name:'睡觉',isChecked:false},
              {name:'打豆豆',isChecked:false}
              ];
              //定义添加的方法
              $scope.add=function(){
                 //收集  整理数据
                 var name=$scope.newData;
                 if(name==null||name==''){
                    alert("输入为空")
                    return;
                 }
                 var obj={
                    name:name,
                    isChecked:false
                 };
                  
                 $scope.todos.unshift(obj);
                 $scope.newData='';
              }
          })
    </script>
</html>

　　效果图

 

 angularJs数据删除

?
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJs删除</title>
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    </head>
    <body ng-app="myApp">
        <div ng-controller="myCtrl">
            <h2>我的私有备忘录</h2>
            <div>
                <input type="text" ng-model="newData" />
                <button ng-click="add()">添加</button>
            </div>
            <div ng-repeat="todo in todos">
                <input type="checkbox" ng-model="todo.isChecked"  />
                <span>{{todo.name}}</span>
            </div>
            <button ng-click="del()">删除选中的记录</button>
        </div>
         
        <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    <script>
        angular.module('myApp',[])
          .controller('myCtrl',function($scope){
              $scope.todos=[
              {name:'吃饭',isChecked:false},
              {name:'睡觉',isChecked:false},
              {name:'打豆豆',isChecked:false}
              ];
              //定义添加的方法
              $scope.add=function(){
                 //收集  整理数据
                 var name=$scope.newData;
                 if(name==null||name==''){
                    alert("输入为空")
                    return;
                 }
                 var obj={
                    name:name,
                    isChecked:false
                 };
                  
                 $scope.todos.unshift(obj);
                 $scope.newData='';
              };
               
              //定义删除的方法
              $scope.del=function(){
                $scope.todos.forEach(function(item,index){
                    //找到选中的
                    var flag=item.isChecked;
                    var flagFirst=item.checked;
                    console.log(flag+" "+flagFirst+" "+index);
                    if(flag){
                        $scope.todos.splice(index,1);
                    }
                })
              }
          })
    </script>
         
    </body>
     
</html>

　　

 效果图

 最后列出angularJs的cdn地址

?
1
2
3
4
5
百度cdn
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
bootcdn
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
目前最新版本是1.5.8

　　

posted @   不忘初心2021  阅读(57)  评论(0)  编辑  收藏  举报
相关博文：
·  angularJs数据存储
·  AngularJs简单使用
·  jQuery动态添加和删除表格记录
·  PrimeNG-Angular-UI-开发-全-
·  js动态表格创建
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示
SQL AI 助手