angular.js练习

最新推荐文章于 2024-02-20 04:45:00 发布

__Daniel

最新推荐文章于 2024-02-20 04:45:00 发布

阅读量1.2k

点赞数

分类专栏：练习文章标签： angular angularjs javascript

本文链接：https://blog.csdn.net/u013291076/article/details/40864875

版权

练习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<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、每一条的前面有一个复选框，当点击该复选框时，内容的最右边显示一个红色的“删除”按钮，当用户点击“删除”按钮时，将原来的内容用红色的删除线表识别。

效果如下

__Daniel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular.js练习

demoStatus 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;}
复制链接

扫一扫

专栏目录