angularjs實現一個應用小程序

如下圖,實現保存,刪除,以及字數變化的過程:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>	
</head>
<body>
    <div ng-app="myapp" ng-controller="ctrl">
    	<h1>我的筆記</h1>
    	<textarea cols="50" rows="10" ng-model="text"  ></textarea><br>
    	<button ng-model="save" ng-click="saving()">保存</button>
    	<button ng-model="delete" ng-click="deleting()">清除</button>
    	<p>剩餘字數:<span ng-bind="left()"</p>
    </div>
   
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
    angular.module('myapp',[]).controller('ctrl',function($scope){
    	// console.log($scope.text.length);
        // 點擊保存,彈出事件
      $scope.saving = function(){
      	 alert("已經成功保存");
      }
	// 點擊清除,內容爲空
      $scope.deleting = function(){
      	$scope.text = "";
      }
	// 剩餘字數逐漸減一
	// 初始化一定要有
	$scope.text = "";
	console.log($scope.text.length);
     $scope.left = function() {
        return 100 - $scope.text.length;
    };

    })
	

</script>
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章