這篇文章給大家分享的是有關AngularJS日程表的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
功能:添加事件/完成事件/刪除事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.note{
margin:0 auto;
background: orange;
color: orange;
width: 400px;
padding:2px 2px;
}
.input{
text-align: center;
}
h2{
text-align: center;
color:#fff;
padding:10px 10px;
}
h6{
color: #fff;
text-align: left;
padding-left: 10px;
}
textarea{
width: 300px;
height: 58px;
resize: none;
border:1px solid orange;
}
button{
width: 80px;
height: 58px;
outline: none;
background: orange;
font-size: 24px;
border:3px solid #fff;
position: relative;
top:-22px;
color: #fff;
}
ul li{
margin:0 auto;
width: 380px;
background: #fff;
list-style: none;
line-height:18px;
padding:2px;
margin-bottom:2px;
}
.delbtn{
background: skyblue;
border:none;
float: right;
line-height:14px;
color: #fff;
padding:2px 6px;
}
.done label{
text-decoration:line-through ;
}
</style>
</head>
<body ng-app="demo">
<div class="note" ng-controller='democontroller'>
<h2>NOTE</h2>
<div class="input">
<textarea name="" id="" cols="30" rows="10" ng-model="text"></textarea><button ng-click="add()">提交</button>
</div>
<div class="todo">
<h6>未完成:{{todos.length}}</h6>
<ul>
<li ng-repeat="todo in todos">
<form>
<input type="radio" id="redio" ng-checked="{{todo.checked}}" ng-click="doit($index)">
<label for="redio">{{todo.text}}</label>
<input type="button" value="刪除" class="delbtn" ng-click="del($index,todos)">
</form>
</li>
</ul>
</div>
<div class="done">
<h6>已完成:{{dones.length}}</h6>
<ul>
<li ng-repeat="done in dones">
<form>
<input type="radio" id="redio" ng-checked="{{done.checked}}" ng-click="notdoit($index)">
<label for="redio">{{done.text}}</label>
<input type="button" value="刪除" class="delbtn" ng-click="del($index,dones)">
</form>
</li>
</ul>
</div>
</div>
<script src="angular.min.js"></script>
<script>
var demo=angular.module('demo',[]);
demo.controller('democontroller',function($scope){
$scope.todos=[];
$scope.dones=[];
$scope.add=function(){
$scope.todos.push({
checked:false,
text:$scope.text
});
$scope.text='';//清空文本框
console.log($scope.todos.length);
}
$scope.doit=function(index){
var str=$scope.todos.splice(index,1)[0];
str.checked=true;
$scope.dones.push(str);
}
$scope.notdoit=function(index){
var str=$scope.dones.splice(index,1)[0];
str.checked=false;
$scope.todos.push(str);
}
$scope.del=function(index,arr){
arr.splice(index,1);
}
});
</script>
</body>
</html>感謝各位的閱讀！關于“AngularJS日程表的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
