AngularJS 启程三

<!DOCTYPE html>
<html lang="zh_CN">
 <head>
  <title>字数小例子</title>
 </head>
 <body ng-app="noCntAPP">
  <div ng-controller="noCntCtrl">
    <h2>我的笔记</h2>
    <textarea cols="30" rows="10" ng-model="txtArea"></textarea>
    
    <p><button>读取</button>
    <button>提交</button>
    <button>撤销</button> 
    <p>剩余字数: {{getCount()}}</p>
    </p>
  <div>
  <script type="text/javascript" src="./angular.js"></script>
  <script type="text/javascript">
    angular.module('noCntAPP',[])
           .controller('noCntCtrl',['$scope',function($scope){
                $scope.txtArea=''; // 初始化文本区域值为空串
                $scope.getCount=function(){
                   return 100 - $scope.txtArea.length;
                }
          }]);
  </script>
 </body>
</html>

剩余字数小例子

<!DOCTYPE html>
<html lang="zh_CN">
 <head>
  <title>字数小例子</title>
 </head>
 <body ng-app="noCntAPP">
  <div ng-controller="noCntCtrl">
    <h2>我的笔记</h2>
    <textarea cols="30" rows="10" ng-model="txtArea"></textarea>
    
    <p><button>读取</button>
    <button>提交</button>
    <button>撤销</button> 
    <p>剩余字数: {{getCount()}}</p>
    </p>
  <div>
  <script type="text/javascript" src="./angular.js"></script>
  <script type="text/javascript">
    angular.module('noCntAPP',[])
           .controller('noCntCtrl',['$scope',function($scope){
                $scope.txtArea=''; // 初始化文本区域值为空串
                $scope.getCount=function(){
                   if($scope.txtArea.length>100){
                   $scope.txtArea = $scope.txtArea.slice(0,100); // 超过 100 截取前 0-99 个字符
                }
                   return 100 - $scope.txtArea.length;
                }
          }]);
  </script>
 </body>
</html>

改进一下加入字符串长度判断

<!DOCTYPE html>
<html>
 <head>
  <title>数据存储演示</title>
 </head>
 <body ng-app="storageApp">
  <div ng-controller="storageCtrl">
    <h2>我的笔记</h2>
    <textarea cols="30" rows="10" ng-model="note">
    
    </textarea>
    <p>
     <button ng-click="save()">保存</button>
     <button ng-click="read()">读取</button>
     <button ng-click="truncate()">清空</button>
    </p>
    <p>{{getRestCount()}}</p>
    <script type="text/javascript" src="./angular.js"></script>
    <script type="text/javascript">
       angular.module('storageApp',[])
              .controller('storageCtrl',['$scope',function($scope){
        $scope.note=''; //初始化笔记为空串
            $scope.getRestCount=function(){
            if($scope.note.length>100){
                $scope.note=$scope.note.slice(0,100); // 若输入大于100个字符则截取前100个字符
                return 100 - $scope.note.length;
            }
        }
           $scope.save=function(){
            alert('note is saved!');
            localStorage.setItem("note_key",JSON.stringify($scope.note)); //转成json串保存到本地存储
             $scope.note='';
        }
         $scope.read=function(){
            $scope.note = JSON.parse(localStorage.getItem('note_key') || '[]'); //处理为 null 的情况
        }
                $scope.truncate=function(){
                  localStorage.removeItem('note_key');
            $scope.note='';
        }
    }])
    </script>
  </div>
 </body>
</html>

View Code

<!DOCTYPE html>
<html>
 <head><title>备忘示例代码</title></head>
 <body ng-app="topAPP">
   
  <div ng-controller="noteCtrl">
     <h2>我的备忘</h2>
     <p><input type="text" ng-model="newHabit"/><button ng-click="add()">新增</button></p>
     <div ng-repeat="habit in habits">
       <input type="checkbox" ng-model="habit.isChecked"/>
       <span>{{habit.habit}}</span>
     </div>
     <p><button ng-click="del()">删除选中项</button></p>
  <div>
  <script src="./angular.js"></script>
  <script>
   angular.module('topAPP',[])
          .controller('noteCtrl',['$scope',function($scope){
        $scope.habits=[{habit:'吃饭',isChecked:false},{habit:'睡觉',isChecked:true},{habit:'打豆豆',isChecked:false}];
                $scope.add=function(){
                        console.log($scope.newHabit);
            if(!$scope.newHabit){
                alert("输入不能为空!");
                return;
            }
            var newObj={
                habit:$scope.newHabit,
                isChecked:false
            };
             $scope.habits.unshift(newObj);
                        $scope.newHabit='';
        };
        $scope.remove=function(){
             $scope.habits.forEach(function(item,index){
                if(item.isChecked){
                    $scope.habits.splice(index,1);
                    $scope.remove();// 递归防止连续index勾选
                }
            });
        };
        $scope.del=function(){
            //逆向思维,仅显示未勾选的
            var oldHabits=$scope.habits;
            $scope.habits=[];// 新建一个空数组
                        oldHabits.forEach(function(item,index){
                if(!item.isChecked){
                    $scope.habits.push(item);
                }
            });
        }
     }]);
  </script>
 </body>
</html>

angularjs遍历增删

posted @ 2018-05-21 16:39 云雾散人阅读(141) 评论(0) 编辑收藏举报

刷新页面返回顶部

云雾散人

拓宽技术栈，深入技术栈，永远学徒空杯心态

AngularJS 启程三

公告