国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

Angular中ng-bind和ng-model的區別實例詳解

2019-11-19 16:52:18
字體:
來源:轉載
供稿:網友

ng-bind和ng-model的區別

AngularJS的數據綁定有ng-bind和ng-model,一般用于如下:

<input ng-model="object.xxx">
<span ng-bind="object.xxx"></span>

ng-bind是單向綁定,由作用于$scope到view層,且在HTML控件(HTML控件有:input、select、button和textarea)中不可顯示。

ng-model是雙向綁定,$scope<--->view層。

{{}}用于顯示數據。

完整代碼

<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <style> div textarea{  background-color:yellow; } </style> <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myNoteApp"> <div class="aa" ng-controller="myNoteCtrl"> <h2>我的筆記</h2> <p> <textarea ng-model="message" rows="10" cols="20" maxlength="100"> </textarea> </p> <p> <button ng-click="save()">保存</button> <button ng-click="clear()">清除</button> </p> <p>Number of characters left: <span ng-bind="left()"></span></p> <p>Number of characters left(method2): <span>{{leftvar}}</span></p> </div> <script> var app = angular.module("myNoteApp",[]); app.controller("myNoteCtrl",function($scope){   $scope.message = "";   $scope.leftvar = 0;   $scope.left = function() {$scope.leftvar = 100 - $scope.message.length;return $scope.leftvar;};   $scope.clear = function() {$scope.message = "";};   $scope.save = function() {alert("Note Saved");}; }); </script> </body> </html> 

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 静海县| 阿拉善左旗| 珲春市| 射阳县| 囊谦县| 岳普湖县| 西乌珠穆沁旗| 于田县| 泰兴市| 漳州市| 洛川县| 全椒县| 宁化县| 东山县| 石景山区| 桐梓县| 孝昌县| 兴国县| 凤凰县| 泽州县| 龙泉市| 秀山| 湘潭县| 吉木乃县| 玛多县| 大连市| 陆良县| 洱源县| 天水市| 喀喇沁旗| 邯郸市| 青川县| 东乡族自治县| 阜阳市| 鄂伦春自治旗| 新巴尔虎右旗| 启东市| 叶城县| 舞阳县| 新乡县| 清丰县|