angular的小實例
阿新 • • 發佈：2018-12-21
charset ldl 循環輸出 多條 textarea 信息 set run row 
主要是使用了angular的指令。
學習地址:http://www.runoob.com/angularjs/angularjs-tutorial.html
1.
效果：
輸入數據剩余字數會相應減少，點擊保存彈出已保存提示信息，點擊清空輸入數據為空。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <View Codemeta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myController"> <h2>我的筆記</h2> <form> <textarea ng-model="message" rows="10" cols="40"></textarea> <P> <button ng-click="save()">保存</button> <button ng-click="clear()">清空</button> </P> </form> <h2>剩余字數：<span ng-bind="left()"></span></h2> </div> <script> var app = angular.module("myApp",[]); app.controller("myController",function($scope){ $scope.message = ‘‘; $scope.save = function(){ alert("notes save!"); } $scope.clear = function(){ $scope.message = ‘‘; } $scope.left = function(){ return 100 - $scope.message.length; } }) </script> </body> </html>
註意：
由於需要顯示在頁面上，即需要輸出數據，使用ng-bind指令，
該指令需要在HTML元素中結合使用(span)
2.
效果：
輸入數據，點擊新增，下面會出現一行數據，內容為剛輸入的數據，輸入一欄清空
選擇某條/多條數據，點擊刪除數據按鈕，數據被刪除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myController"> <h2>我的備忘錄</h2> <input type="text" size="30" ng-model="message"> <button ng-click="insert()">新增</button> <p ng-repeat="x in todoList"> <input type="checkbox" ng-model="x.todo"> <span ng-bind="x.todoText"></span> </p> <p> <button ng-click="delete()">刪除數據</button> </p> </div> <script> var app = angular.module("myApp",[]); app.controller("myController",function($scope){ $scope.message = ‘‘; $scope.todoList = [{todoText : "clean house",todo : false}]; $scope.insert = function(){ $scope.todoList.push({todoText : $scope.message,todo : false}); $scope.message = ‘‘; } $scope.delete = function(){ var oldList = $scope.todoList; $scope.todoList = []; angular.forEach(oldList,function(x){ if(!x.todo){ $scope.todoList.push(x); } }) } }) </script> </body> </html>View Code
註意：
可以給text文本設置size屬性，規定需要輸入的數據長度
需要使用循環，可以將todoList數組中的數值輸出出來
在todoList數組中每條數據中設置todo屬性，以便對增加的數據進行刪除時選擇（checkbox）
增加按鈕實現的原理是：向數組中push輸入數據，從而循環輸出數組中的數據，達到增加的效果
刪除按鈕實現的原理是：
創建一個新的數組（oldList），然後將當前數組（todoList)復制給新數組，再將todoList清空
使用循環，判斷oldList中的每條數據中的todo是否為false，即是否被選中，
若未被選中，則將該條數據添加進todoList,最後輸出該數組中的所有數據，即實現了刪除被選擇的數據。
angular的小實例