angularJs数据动态展示,新增,删除
angularJs数据动态展示
<!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数据添加
<!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数据删除
<!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地址
百度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