AngularJS 关于ng-model和ng-bind还有{{}}

最新推荐文章于 2020-04-23 17:24:02 发布

琅琊山二当家

最新推荐文章于 2020-04-23 17:24:02 发布

阅读量985

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/AlbertFly/article/details/63693483

版权

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<input ng-model="object.xxx">

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

也就是说ng-bind是相当于{{object.xxx}}，是用于展示数据的。而ng-model是控制数据的。

bind多出现span div 中，model多在input 里面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="quantity=2;cost=5">
<p>总价: <span ng-bind="quantity * cost"></span></p>
	<p>数量: <input type="text"  value="{{cost}}"></p>
	<p>数量: <input type="text"  ng-model="cost*10"></p>
	<p>数量: <input type="text"  ng-model="cost"></p>

</div>

</body>
</html>

结果：

绑函数使用ng-bind

<html ng-app="myNoteApp">
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-controller="myNoteCtrl">

<h2>我的笔记</h2>

<p><textarea ng-model="message" cols="40" rows="10"></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>

</div>

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

</body>
</html>

以下转载:

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 html where val is a variable name.

ng-model is intended to be put inside of form elements and has two-way data binding ($scope --> view and view --> $scope) e.g. <input ng-model="val"/>.

ng-bind是从$scope -> view的单向绑定
ng-modle是$scope <-> view的双向绑定

在AngularJS中显示模型中的数据有两种方式：

<p>{{text}}</p>

另一种是使用基于属性的指令，叫做ng-bind：

<p ng-bind="text"></p>

主要区别在于，使用花括号语法时，在AngularJS使用数据替换模板中的花括号时，第一个加载的页面，通常是应用中的index.html，其未被渲染的模板可能会被用户看到。而使用第二站方法的视图不会遇到这种问题。

原因是，浏览器需要首先加载index.html页面，渲染它，然后AngularJS才能把它解析成你期望看到的内容。

所以，对于index.html页面中的数据绑定操作，建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。

http://blog.csdn.net/u010423904/article/details/51023412

琅琊山二当家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 关于ng-model和ng-bind还有{{}}

What's the difference between ng-model and ng-bindng-bind has one-way data binding ($scope --> view). It has a shortcut {{ val }} which displays the scope value $scope.val inserted into
复制链接

扫一扫