如下圖,實現保存,刪除,以及字數變化的過程:
<!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>