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
浙公网安备 33010602011771号