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,如若转载,请注明出处:https://www.web176.com/angularjsex/6542.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2022年8月16日 上午11:55
下一篇 2022年8月16日 下午2:09

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注