Angular中ng-bind和ng-model的区别实例详解
更新时间：2017年04月10日 11:27:05 投稿：lqh
这篇文章主要介绍了Angular中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>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
这篇文章主要介绍了AngularJS实现根据变量改变动态加载模板的方法,结合实例形式简单分析了AngularJS动态加载模板的主要操作技巧与模板实现代码,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了angularJs的ng-class切换class,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要给大家介绍了关于如何利用Angular7开发一个Radio组件的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Angular7具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
下面小编就为大家分享一篇AngularJS中重新加载当前路由页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了使用Angular内置模块进行HTTP请求方法步骤详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
详解在AngularJS的controller外部直接获取$scope
本篇文章主要介绍了详解在AngularJS的controller外部直接获取$scope ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
MODULE_INITIALIZER初始化Angular 懒加载模块高级技巧
这篇文章主要为大家介绍了MODULE_INITIALIZER初始化Angular懒加载模块高级技巧示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
这篇文章主要介绍了Angularjs过滤器实现动态搜索与排序功能,涉及AngularJS过滤器相关搜索、查询、排序操作技巧,需要的朋友可以参考下2017-12-12
本文主要介绍AngularJS 模板，这里整理了详细相关资料，并附示例代码，有兴趣的小伙伴可以参考下2016-08-08
这篇文章主要给大家介绍了关于Angular 4中如何显示内容的CSS样式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
最新评论