<span style="font-family: 宋体, sans-serif;">html代码</span>
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<meta name="author" content="yulin"/>
<title>demoStatus</title>
<style>
ul,li{list-style: none;}
#page,#page>li{float:left;}
#page>li{padding-right:10px;}
#container{
width:400px;margin:0 auto;
}
.ipt{width:360px;height:40px;}
.btn2{color: red;}
.done-true {
text-decoration: line-through;
color:red;
}
.scroll{height:150px;overflow-y:scroll;}
</style>
<script src="../framework/angular/angular.js"></script>
<script src="../js/demoStatus.js"></script>
</head>
<body>
<div id="container" ng-controller="ctrl">
<input type="text" placeholder="What needs to be done?" class="ipt" ng-model="addList" ng-keyup="add()" >
<br/>
<input type="checkbox" ng-model="check" ng-click="markAll()"><span>Mark all as complete</span>
<input type="checkbox" ng-model="check2" ng-click="show()"><span>Show archived</span>
<br>
共有{{lists.length}}条数据
sort by:
<select ng-model="orderProp">
<option value="text">Alphabetical</option>
<option value="numb">Newest</option>
</select>
<div ng-include="index2">
<ul ng-class="ul">
<li ng-repeat="list in lists | orderBy:orderProp">
<input type="checkbox" ng-model="list.checked" ng-click="goTop($index)">
<span class="done-{{list.done}}">{{list.text}}<input type="button" class="btn2" value="删除" ng-show="list.checked" ng-click="delete($index)"></span>
</li>
</ul>
</div>
<div><ul id="page"><li ng-repeat="list in pageArray"><a href="" ng-click="cg('views/'+list.page+'.html',list.page)">{{list.text}}</a></li></ul></div>
<br><br><br><br>
<a href="" ng-click="clear()">Purge</a>
<a href="" ng-click="reset()">Reset</a>
</div>
</body>
</html>
ng-include默认模板
<ul ng-class="ul">
<li ng-repeat="list in lists | orderBy:orderProp">
<input type="checkbox" ng-model="list.checked" ng-click="goTop($index)">
<span class="done-{{list.done}}">{{list.text}}<input type="button" class="btn2" value="删除" ng-show="list.checked" ng-click="delete($index)"></span>
</li>
</ul>
js代码
/**
* Created by yulin on 2014/11/5.
*/
var app=angular.module('app',[]);
app.controller('ctrl',['$scope',function($scope){
$scope.addList="";//输入框值
$scope.ul="";//ul类
$scope.i=2;//翻页初始值
$scope.arrayLen;//翻页数组长度
$scope.pageArray=[{text:1,page:1}];//翻页数组
$scope.deleteArray=[];//存储lists数组
$scope.index2="views/1.html";//默认nginclude页
//翻页功能
$scope.cg=function(x,y){
if($scope.deleteArray!="") {
$scope.lists=$scope.deleteArray;
};
if(y==1){
$scope.index2="views/1.html";
}else{
$scope.deleteArray=[];
angular.forEach($scope.lists,function(text){
this.push(text);
},$scope.deleteArray);
$scope.lists.splice(0,(y-1)*8,"ws");
$scope.lists.shift();
$scope.index2="views/1.html";
}
};
//改变输入框的值
$scope.goTop=function(index){
$scope.addList=$scope.lists[index].text;
};
//增加list
$scope.add=function() {
if (event.keyCode == 13) {
//add new list
var list = {
text: "",
numb:"",
done:"",
checked:""
};
list.text = $scope.addList;
list.numb=$scope.lists.length;
list.done=false;
list.checked=false;
var len=$scope.lists.length;
$scope.lists.push(list);
for(var i=0;i<len;i++){
if($scope.lists[i].checked==true){
$scope.lists[i].text=$scope.addList;
$scope.lists.pop();
}
}
//$scope.lists.push(list);
//add page
//alert()
if($scope.lists.length>=8){
$scope.ul='scroll';
if($scope.lists.length%8==0){
$scope.arrayLen=parseInt($scope.lists.length/8);
if($scope.pageArray.length==$scope.arrayLen){$scope.i=$scope.arrayLen+1;};
for ($scope.i;$scope.i<($scope.arrayLen+2);i++){
var list={
text:"",
page:""
};
list.text=$scope.i;
list.page=$scope.i;
$scope.pageArray.push(list);
$scope.i+=1;
}
}
}
}
}
//默认lists数组
$scope.lists=[
{text:'hello world',numb:0,done:false,checked:false},
{text:'everything will be better',numb:1,done:false,checked:false},
{text:'ccccccccccccccc',numb:2,done:false,checked:false},
{text:'bbbbbbbb',numb:3,done:false,checked:false}
];
//排序
$scope.orderProp='numb';
//Mark all as complete
$scope.check=false;
$scope.markAll=function(){
if($scope.check==true) {
angular.forEach($scope.lists, function (text, done) {
text.done=false;
text.checked=false;
}, $scope.lists);
}
};
//Show archived
$scope.check2=false;
$scope.show=function(){
var newList=[];
if($scope.check2==true){
angular.forEach($scope.lists,function(text){
if(text.done==false){
this.push(text);
}
},newList);
$scope.lists=newList;
}
if($scope.lists.length<=8){
$scope.ul="";
$scope.pageArray=[{text:1,page:1}];
} else{
var c=parseInt($scope.lists.length/8);
if(c){
$scope.pageArray=[];
for(var i=1;i<=c+1;i++){
var list={
text:"",
page:""
}
list.text=i;
list.page=i;
$scope.pageArray.push(list);
}
}
}
}
//删除加红线
$scope.delete=function(index){
for(var i=0;i<$scope.lists.length;i++){
$scope.lists[i].numb=i;
};
if($scope.lists[index].numb==index){
$scope.lists[index].done=true;
};
}
//清除表单
$scope.clear=function(){
$scope.lists=[];
$scope.ul="";
};
//重置表单
$scope.reset=function(){
$scope.lists=[
{text:'hello world',numb:0,done:false,checked:false},
{text:'everything will be better',numb:1,done:false,checked:false},
{text:'ccccccccccccccc',numb:2,done:false,checked:false},
{text:'bbbbbbbb',numb:3,done:false,checked:false}
];
$scope.ul="";
};
}]);
整体效果如下:
1、最上面的句型框为文本输入框,当用户未输入任何内容时,以较浅颜色的字体提示“What needs to be done?(需要点啥?)”;当用户
输入字符时,显示用户输入的内容。
2、当用户在输入框中,按回车键时,将用户输入框中的内容追加到下面的列表,并显示列表的全部内容。
3、用户输入的内容可以按输入时间的先后顺序排列,也可按字母顺序排列。
4、当前页面只显示8条内容,如果列表的内容超过8条,用户可通过上下翻屏来显示当前页面中未显示的内容。
5、列表内容超过8条时,当前页面的右边需要有明显的滚动条予以表示,指明用户可以操作滚动条,不多余8条时则不需要。
6、每一条的前面有一个复选框,当点击该复选框时,该条内容(用户原来在输入框中输入的内容)会显示在上面的输入框中,等待用户修
改。用户按回车键后,用新的内容替换原来的内容。
7、每一条的前面有一个复选框,当点击该复选框时,内容的最右边显示一个红色的“删除”按钮,当用户点击“删除”按钮时,将原来的内
容用红色的删除线表识别。