欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Angular中ng-bind和ng-model的区别实例详解

程序员文章站 2022-04-29 08:57:39
ng-bind和ng-model的区别 angularjs的数据绑定有ng-bind和ng-model，一般用于如下：

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>

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

上一篇： Java SE 6 Update 12 发布

下一篇： Vue2 Vue-cli中使用Typescript的配置详解

推荐阅读