AngularJS 是一個(gè) MV* 框架,最適于開發(fā)客戶端的單頁(yè)面應(yīng)用。它不是個(gè)功能庫(kù),而是用來開發(fā)動(dòng)態(tài)網(wǎng)頁(yè)的框架。它專注于擴(kuò)展 HTML 的功能,提供動(dòng)態(tài)數(shù)據(jù)綁定(data binding),而且它能跟其它框架(如 JQuery 等)合作融洽。
<body ng-app="myNoteApp">
<html>
<div ng-controller="myNoteCtrl">
<p><textarea ng-model="message" cols="40" rows="10" maxlength="100"></textarea></p>
<p>100/<span ng-bind="left()"></span></p>
</div>
</html>
<script type="text/javascript">
var app=angular.module("myNoteApp",[]);
app.controller("myNoteCtrl",function($scope){
$scope.message = "";
//顯示變更數(shù)量
$scope.left = function() {return 100 - $scope.message.length;};
//清除文本框
$scope.clear = function() {$scope.message = "";};
//執(zhí)行保存操作
$scope.save = function() {alert("Note Saved");};
});
</script>
</body>
備注:
如果在同一個(gè)表單中有多個(gè)“textarea”可以通過定義多個(gè)“ng-model”來控制
如果在不同的表單中操作不同的”textarea“ ,可以通過定義多個(gè)“ng-controller”來控制
但不管何種情況,如果在同一個(gè)文件中,同一個(gè)body中最好只使用一個(gè)”ng-app“
補(bǔ)充:Angular JS 中的 <textarea>用法
最近測(cè)試用把 textarea 中的值傳往后臺(tái)傳,不過后臺(tái)收不到,代碼是這樣寫的:
<textarea rows="15" ng-model="notice.content" style="width:65%">{{ notice.content }}</textarea>
后來修改了一下,把兩個(gè) textarea 之間的內(nèi)容去掉了,后臺(tái)就能收到了,看來Angular JS中還是有一些機(jī)制需要去弄清楚。
<textarea rows="15" ng-model="notice.content" style="width:65%"></textarea>