angularjs之ng-bind和ng-model
1、为什么其他标签可以用ng-bind ,而input标签要用ng-model
这就是所谓的数据双向绑定,input是用于用户输入的,数据要从View传输到Controller中,而{{}}和ng-bind是用于从controller中得到数据然后显示在view中的
2、{{}}和ng-bind的区别
在angularjs中限制模型中的数据有两种方式:
一种是使用花括号插值的方式:
<p>{{text}}</p>
另一种是使用基于属性的指令,叫做ng-bind:
<p ng-bind="text"></p>
这两种方式的效果都是一样的,其主要区别在于,使用花括号语法时,在AngularJS使用数据替换模板中的花括号时,第一个加载的页面,通常是应用中的index.html,其未被渲染的模板可能会被用户看到。而使用第二站方法的视图不会遇到这种问题。
原因是,浏览器需要首先加载index.html页面,渲染它,然后AngularJS才能把它解析成你期望看到的内容。
所以,对于index.html页面中的数据绑定操作,建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。
angularjs之ng-bind和ng-model的更多相关文章
- angular报错:angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq
报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p& ...
- Part 14 ng hide and ng show in AngularJS
ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us under ...
- angular.min.js:118 Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?
1,错误如图所示 简单说下错误原因是:没有js没有注册进去. 解决方法: 1.看下index.html有没有引入你的js文件. 2.看下app.js有没有注册js,比如我这次就是这步没做好,合并代码时 ...
- AngularJS中angular.min.js:80 Error: [ng:areq] http://errors.angularjs.org/1.2.9/ng/areq
报出来的时候,出现这种错误,是因为在引入控制器的时候没有引入成功,我遇到这个错误是在因为没有将父控制器引入到子控制器中.
- Angular6之ng build | ng build --aot | ng build --prod 差异
由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...
- 在库中使用schematics——ng add与ng update
起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...
- AngularJS方法 —— angular.bind
描述: 上下文,函数以及参数动态绑定,返回值为绑定之后的函数. 其中args是可选的动态参数,self在fn中使用this调用. 使用方法: angular.bind(self,fn,args ); ...
- angularJS $scope的$apply方法实现model刷新
控制器内,$scope有个$apply方法,可以代码更改model并同步更新页面.通常,控制器内的方法执行完毕后仅会自动刷新一次页面展示,使用$apply方法即可在想刷新页面时就刷新.如本例,这个方法 ...
- Error: [ng:areq]
错误描述:Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=HelloCtrl&p1=not%20a%20functi ...
- 翻译-让ng的$http服务与jQuerr.ajax()一样易用
Make AngularJS $http service behave like jQuery.ajax() 让ng的$http服务与jQuerr.ajax()一样易用 作者zeke There is ...
随机推荐
- C++的vector对象
C++的vector使用 标签(空格分隔): C++ 标准库类型vector表示对象的集合,其中所有对象的类型都相同.集合中的每个对象都有一个与之对应的索引,索引用于访问对象,因为vector容纳着其 ...
- EEGLAB数据分析:预处理与后续处理
来源:http://blog.sina.com.cn/s/blog_13171a73d0102v4zx.html 数据预处理主要包括数据导入.电极定位.电极返回.滤波.去除伪迹.重建参考.分段.叠加平 ...
- Ubuntu14.04下配置固定IP
实验室需要构建静态网站作为个人知识管理工具,每个人要求都有属于自己的静态网站进行知识积累和交流.但是实验室的路由有时候会关闭,重启后给每台机器重新分配ip,因此为了方便访问每台主机,需要设置静态ip. ...
- matlab常用的字符串操作函数之一
1,strcat和strvcat strcat:依次横向连接字符串: strvcat:依次纵向连接字符串: 实例1: >>a1='sophia '; >>a2='is a '; ...
- 用C#实现封装
用C#实现封装 1.属性对外公开类似于类的接口实现对字段的访问;2.字段为private只能在内部被直接访问,如果当属性为只读,那么可以将形参直接对字段赋值.(有没有更好的方法?);3.可以通过关键字 ...
- elasticsearch suggest 的几种使用-completion 的基本 使用
在lucene里面,suggest 的支持非常完善,可以随心所欲的定制: 但是在es中使用起来就没有那么方便了. es给suggest 分类4类:term :phrase: completion: c ...
- JavaScript实现计算两个日期之间的天数
以“yyyy-MM-dd”格式为例,现在有两个日期,分别为“2006-01-01”,“2007-05-20”. 1.调用Date.parser()方法,将字符串格式的时间戳转换为Date类型时间对象: ...
- RecyclerView的使用(四)
前面我们已经实现了RecyclerView的大部分功能了,但是有个很明显的缺陷-------没有点击效果!这就坑爹了 ListView自带点击效果好嘛!连这个都要自己定义.... 话不多说,下面就来为 ...
- requestAnimationFrame,Web中写动画的另一种选择
HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canv ...
- extracting fasta records from a multi-fasta file based on a list using awk
for i in $(cat gene_list) do awk -v RS=">" '($1==a){print ">"$0}' a=$i inp ...