angular中ng-bind和ng-model的区别

最新推荐文章于 2020-04-23 17:24:02 发布
最新推荐文章于 2020-04-23 17:24:02 发布
阅读量472 收藏
点赞数
分类专栏： web大前端
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层。
{{}}用于显示数据。

完整代码

[plain]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <meta charset="utf-8">  
  4. <head>  
  5. <style>  
  6. div textarea{  
  7.   background-color:yellow;  
  8. }  
  9. </style>  
  10. <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>  
  11. </head>  
  12. <body ng-app="myNoteApp">  
  13. <div class="aa" ng-controller="myNoteCtrl">  
  14. <h2>我的笔记</h2>  
  15. <p>  
  16. <textarea ng-model="message" rows="10" cols="20" maxlength="100">  
  17. </textarea>  
  18. </p>  
  19. <p>  
  20. <button ng-click="save()">保存</button>  
  21. <button ng-click="clear()">清除</button>  
  22. </p>  
  23. <p>Number of characters left: <span ng-bind="left()"></span></p>  
  24. <p>Number of characters left(method2): <span>{{leftvar}}</span></p>  
  25. </div>  
  26. <script>  
  27. var app = angular.module("myNoteApp",[]);  
  28. app.controller("myNoteCtrl",function($scope){  
  29.     $scope.message = "";  
  30.     $scope.leftvar = 0;  
  31.     $scope.left = function() {$scope.leftvar = 100 - $scope.message.length;return $scope.leftvar;};  
  32.     $scope.clear = function() {$scope.message = "";};  
  33.     $scope.save = function() {alert("Note Saved");};  
  34. });  
  35. </script>  
  36. </body>  
  37. </html>  
jingtian678
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular中ng-bind和ng-model的区别实例详解
11-29
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="
ng-model 和ng-bind的区别
weixin_34013044的博客
11-02 178
也就是说 ng-model是绑定html输入的值-->到控制器的变量，输入值变了，控制器对应的变量message的值页变了，这样，在其他地方就可以使用这个变化后的值 ng-bind 是绑定控制器的值-->到html页面,控制器的变量值变了，页面的数据跟着变 转载于:https://www.cnblogs.com/Andrew520/p/9896446.html...
Angular中的ng-bind和ng-model区别
lxiang222的博客
06-23 620
ng-bind是从$scope -> view的单向绑定，是用于展示数据的。ng-model是$scope <-> view的双向绑定。<div ng-model="name">{{name}}</div> <div ng-bind="name"></div> 因为js是单线程，如果不使用ng-bind绑定元素会使得在代码还没运行到导入script那一步页面会先显示成{{name}}这种形式，为了避
Angular Js入门之ng-bind和ng-model和｛｛｝｝的区别
NINE-NINE的博客
05-18 9439
Angular Js入门之ng-bind和ng-model和｛｛｝｝的区别
ng-bind 与ng-model区别
baku0380的博客
06-15 206
ng-bind 1、ng-bind作用是在页面上显示控制器中的数据，是单向绑定的。 2、ng-bind与花括号表达式{{}}是等价的。 3、ng-bind使用给定的变量或表达式的值来替换 HTML 元素的内容。 ng-model 1、ng-model作用是进行数据双向绑定。 2、ng-model绑定了 HTML 表单元素到 scop...
深入理解AngularJS中的ng-bind-html指令和$sce服务
11-25
Angularjs的强大之处之一就是他的数据双向绑定这一牛B功能，我们会常常用到的两个东西就是ng-bind和针对form的ng-model。 但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签。 如： $...
深入浅析AngularJs模版与v-bind
01-19
v-bind与{{}}都可以对数据进行绑定，但是二者有区别的，v-bind不好，为什么说v-bind不好是因为v-bin做了完全替换的错做，如果你想做字符串的拼接那么v-bind不是很好的选择，下面看例子。 代码段来喽 比如我们有个...
Angular.js中数组操作的方法教程
12-10
 1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app  2:placeholder,  3:{}中加入代码“：true|false”,使用逗号隔开，可以控制包括样式，显示与隐藏等功能，} 1、数组的创建 var arrayObj
angularjs之ng-bind和ng-model
weixin_30617561的博客
05-05 100
1、为什么其他标签可以用ng-bind ,而input标签要用ng-model 这就是所谓的数据双向绑定，input是用于用户输入的，数据要从View传输到Controller中，而{{}}和ng-bind是用于从controller中得到数据然后显示在view中的 2、{{}}和ng-bind的区别 在angularjs中限制模型中的数据有两种方式： 一种是使用花括号插值的...
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
10-18
今天小编就为大家分享一篇解决angular2在双向数据绑定时[(ngModel)]无法使用的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
AngularJS 关于ng-model和ng-bind还有{{}}
梦骑士的博客
03-31 1万+
What's the difference between ng-model and ng-bind ng-bind has one-way data binding ($scope --> view). It has a shortcut {{ val }} which displays the scope value $scope.val inserted into
ng-model和ng-bind之间有什么区别
p15097962069的博客
04-23 567
I'm currently learning AngularJS and am having difficulty understanding the difference between ng-b
ng-bind 与ng-model及ng-bind与{{}}区别:
weixin_30699465的博客
01-10 168
ng-bind 与ng-model区别:双向绑定，一般来说是这样 <input ng-model="object.xxx"> <span ng-bind="object.xxx"></span> ng-bind是从$scope -> view的单向绑定，也就是说ng-bind是相当于{{object.xxx}}，是用于展示数据的。ng-mo...
AngularJS入门（用ng-bind指令实现单向绑定）
weixin_34273046的博客
10-29 132
为什么80%的码农都做不了架构师？>>> ...
Angular JS 中的 <textarea>用法
热门推荐
小鹰信息技术服务部
05-19 2万+
最近测试用把 textarea 中的值传往后台。
ng-model、ng-bind、ng-value使用区别
laogadai的博客
06-18 5007
1、ng-model : 是双向数据绑定，改变页面上ng-model模块的值，也会对$scope中对应的值起作用;       ng-bind : 是单向数据绑定，页面上改变并不会对$scope中内容起到作用;       ng-value : 作用类似于 html中value的作用; 2、ng-model : 可以定义在 等标签内，显示值       ng-bind : 是覆盖html元
ng-bind、ng-value和ng-model
lzf的博客
07-23 3662
在html页面中定义angular的赋值表达式，要么用ng-value,要么用ng-bind,要要么用ng-init使用ng-init、ng-bind、ng-value、ng-model指令都可以生成数据模型，即如果 scope 中不存在变量, 将会创建它。ng-init只能用于生成数据模型ng-bind、ng-value、ng-model指令既可以绑定已有的变量，也可以生成数据模型，即如果 sc...
ng-bind-html 和 ng-model同时使用
最新发布
05-26
可以同时使用 `ng-bind-html` 和 `ng-model`，但要注意以下几点： 1. `ng-model` 绑定的是表单元素的值，例如 `input`、`select`、`textarea` 等，而 `ng-bind-html` 绑定的是 HTML 内容。 2. `ng-bind-html` 必须与 `$sce.trustAsHtml` 方法一起使用，以确保 HTML 内容被正确解析和渲染。例如： ```html <div ng-bind-html="$ctrl.htmlContent"></div> ``` ```javascript angular.module('myApp', []).controller('myCtrl', function($sce) { this.htmlContent = $sce.trustAsHtml('<p>Hello, world!</p>'); }); ``` 3. 如果需要将表单元素的值与 HTML 内容绑定在一起，可以使用自定义指令。例如： ```html <div my-directive ng-model="$ctrl.htmlContent"></div> ``` ```javascript angular.module('myApp', []).directive('myDirective', function($sce) { return { restrict: 'A', require: 'ngModel', link: function(scope, element, attrs, ngModel) { ngModel.$formatters.push(function(value) { return $sce.trustAsHtml(value); }); ngModel.$parsers.push(function(value) { return value ? value.toString() : ''; }); } }; }); ``` 这里的自定义指令将 ng-model 绑定的值转换为 HTML 内容，并将 HTML 内容还原为字符串。这样就可以同时使用 `ng-bind-html` 和 `ng-model` 了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值