AngularJS 笔记应用 | AngularJS 实例

来分享一个AngularJS 笔记应用，写入一段文字，计算文字多少，并且保存有提示。一起看下DEMO：

<!DOCTYPE html>
<html>
<head>
<title>AngularJS 实例 | Web176教程网web176.com</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myNoteApp" ng-controller="myNoteCtrl">

<h2>我的笔记</h2>


<textarea ng-model="message" cols="40" rows="10"></textarea>

<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>

<p>剩余字数: <span ng-bind="left()"></span></p>

<script>
  var app = angular.module("myNoteApp", []); 
  
  app.controller("myNoteCtrl", function($scope) {
    $scope.message = "";
    $scope.left = function() {
        return 100 - $scope.message.length;
    };
    $scope.clear = function() {
        $scope.message = "";
    };
    $scope.save = function() {
        alert("Note Saved");
    };
  });

</script>

</body>
</html>

大家预览试试！

terry

这个人很懒，什么都没有留下～