html与js的取值,赋值
-------------------------------------------------- -------------------------------------------------- -------
html事件中传值: <button ng-click="showColor('green')">变色</button>
js中取值:
$scope.showColor=function($routeParams){
alert($routeParams)
}
-------------------------------------------------- -------------------------------------------------- -------
html中赋值:<a href="#/detail/{{ book }}"> book={{ book }}<br/>
js中取值:$routeParams. book
book为属性名
-------------------------------------------------- -------------------------------------------------- --------------------------------------
浏览器中赋值:
http://localhost:8080/test/index.html# /hello
app.js中取值
var app =angular.module('bookStoreApp',[
'bookStroreCtrls'
]);
app.config(function($routeProvider){
$routeProvider.when('/hello',{
templateUrl:'html/hello.html',
controller :'HelloCtrl'
})
.when('/ hello ',{
templateUrl:'html/form/testFormCtrl.html',--------跳转到对应的html页面
controller:'TestFormCtrl'--- ------寻找对应的controller
})
.when('/list',{
templateUrl:'html/bookList.html',
controller:'BookListCtrl'
})
.when('/detail/:book',{
templateUrl:'html/detail.html',
controller:'BookDetailCtrl'
})
.otherwise({
redirectTo:'/hello'
})
});
-------------------------------------------------- -------------------------------------------------- -------
Js中赋值:
/ng-bind在index.html首页的时候代替{{}}取值,在其他页面均用{{}}取值即可
1简单的赋值
$scope.hello="你好";
2 外层.内层赋值
$scope.hello={
someText:'演示特性二:演示模块化'
};
3 集合的赋值
$scope.books=[
{title:"书1",author:"作者1"},
{title:"书2",author:"作者2"},
{title:"书3",author:"作者3"}
]
$scope.names=['zhangsan','lisi','wangwu'];
html中取值:
1简单的取值{{hello}}输出"你好"
2外层.内层取值{{hello.someText}}输出“演示特性二:演示模块化”
3 集合取值
<div ng-controller="listCtrol">
<table>
<tr ng-repeat='name0 in names' >
<td >{{id}}-{{name}}—{{name0}}-{{department} } from {{names}}</td>
</tr><br/>
</table>
</div>
<ul>
<!--此处标签内放两个ng-repeat不会报错,只是起作用而已。当两个同时出现时,标签只认第一个-->
<li ng-repeat="book in books" ng-repeat="name in names" >
<a href="#/detail/{{ book } }"> book={{ book }}<br/>
title={{book.title}}<br/>
author={{book.author}}<br/>
names={{names}}<br/ >
name={{name}}<!--此处无法显示-->
</a>
</li>
隐藏与显示的时候,我们要注意,赋值是不变的,取值是不需要加{{}}的
//列表默认隐藏
js:$scope.visible = true;
html:<div ng-hide="visible"></div>
html赋值:
1{{ }}==== 除index.html之外,其他页面均可以使用这样的赋值方法
<div>{{name}}</div>
{{ }}语法是AngularJS内置的模板语法,它会在内部$scope和视图之间创建绑定。基于这个
绑定,只要$scope发生变化,视图就会随之自动更新。
事实上它也是指令,虽然看起来并不像,实际上它是ng-bind的简略形式,用这种形式不需
要创建新的元素,因此它常被用在行内文本中。
注意,在屏幕可视的区域内使用{{ }}会导致页面加载时未渲染的元素发生闪烁,用ng-bind
可以避免这个问题。
<body ng-init="greeting='HelloWorld'">
{{ greeting }}
</body>
在线示例:http://jsbin.com/ODUxeho/1/edit。
2 ng-bind==index.html中一般使用这个,不用{{}}
尽管可以在视图中使用{{ }}模板语法(AngularJS内置的方式),我们也可以通过ng-bind
指令实现同样的行为。
<body ng-init="greeting='HelloWorld'">
<p ng-bind="greeting"></p>
</body>
在线示例:http://jsbin.com/esihUJ/1/edit。
HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash of
Unrendered Content,FOUC)。我可以用ng-bind将内容同元素绑定在一起避免FOUC。内容会被
当作子文本节点渲染到含有ng-bind指令的元素内。
3 ng-cloak index.html中也可以使用这样的方法
除使用ng-bind来避免未渲染元素闪烁,还可以在含有{{ }}的元素上使用ng-cloak指令:
<body ng-init=" greeting='HelloWorld'">
<p ng-cloak>{{ greeting }}</p>
</body>
ng-cloak指令会将内部元素隐藏,直到路由调用对应的页面时才显示出来。
以上为赋值单个, 以下为赋值多个
ng-bind-template
同ng-bind指令类似,ng-bind-template用来在视图中绑定多个表达式。
<div
ng-bind-template="{{message}}{{name}}">
</div>
html与js的取值,赋值的更多相关文章
- js表单快速取值/赋值 快速生成下拉框
1.表单取值/赋值公共方法 //表单序列化:文本框的name字段和数据源一致<form id="myForm" onsubmit="return false;&qu ...
- Data层相关问题 & JS循环取值
第一次写博客,里面是自己工作中碰到的问题及总结的知识点,便于自己以后回顾,技术大牛们请直接忽略这篇文章,也希望能帮助到想我这样的小白! Data层相关问题总结: 1. 代码管理用的是 VSS 2005 ...
- JQuery关于span标签的取值赋值
span取值赋值方法有别于一般的页面元素.JQ://赋值$("#spanid").html("hello world") //取值$("#spanid ...
- Jquery 关于span标签的取值赋值用法
span是最简单的容器,可以当作一个形式标签,其取值赋值方法有别于一般的页面元素. //赋值 $("#spanid").html(value) //取值 $("#span ...
- Jquery操作下拉框(DropDownList)实现取值赋值
Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...
- Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢)
Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢) 1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val() ...
- winform 批量控件取值赋值
以前写winform 最多写几个文本框,最近需要入录一个人员信息,那好几十个字段,一下子干蒙了,这要是一个个取值赋值都写到明天了,于是就自己写了个方法,也不是什么高大上的,就是很简单很普通很low的方 ...
- Dynamics 365-表单元素取值/赋值
取值/赋值 参考: 山人丶 提示: 查找类型赋值时需指定目标实体,记录名称及id值 时间和日期类型赋值时需赋值Date类型 //获取new_name的值(单行文本) Xrm.Page.getAttri ...
- [King.yue]Ext.JS 弹出窗体取值赋值
//从Grid取值 var name = Ext.getCmp(gridGridID).getView().getSelectionModel().getSelection()[0].data.Nam ...
随机推荐
- PowerPoint 打开文档发现.pptx中胡内容有问题
一.问题的提出 有一个文件,在window 7操作系统中通过邮箱地址保存到本地,结果打开的时候出现[PowerPoint 打开文档发现 文件.pptx中胡内容有问题] 然后提示[如果您信任此演示文稿的 ...
- MarkDown写blog(测试)
区块元素 段落和换行 一个 Markdown 段落是由一个或多个连续的文本行组成,它的前后要有一个以上的空行(空行的定义是显示上看起来像是空的,便会被视为空行.比方说,若某一行只包含空格和制表符,则该 ...
- Session丢失的解决办法小结
最近在做ASP.NET项目时,测试网站老是取不出Session中的值,在网上搜索了一下,找到一些解决方法,记录在这里.最后使用存储在StateServer中的办法解决了问题. SessionState ...
- PyAMF and django ForeignKey
In order to support this, PyAMF needs to provide a synonym mapping between fields. Until then, you c ...
- 关于js中的几个小问题。
问题1: 使用连续赋值后面的变量会成为全局对象的一个属性,并且这个属性可以通过delete删除. 原因:赋值语句是从右往左执行的,我们将10赋值给了c,但是c此时还声明,接着把c的返回值赋值给了b,但 ...
- js替换指定字符串
// var a = "212"; // var b = []; // for(var i=0;i<a.length;i++){ // if(a[i]=="1&qu ...
- 关于异步Promises
英文原文:What's The Point Of Promises? 迄今为止,可能每个JavaScript开发者和他们的祖母都听说过Promises.如果你没有,那么你即将会.promises的概念 ...
- [python]decimal常用操作和需要注意的地方
decimal模块 简介 decimal意思为十进制,这个模块提供了十进制浮点运算支持. 常用方法 1.可以传递给Decimal整型或者字符串参数,但不能是浮点数据,因为浮点数据本身就不准确. 2.要 ...
- 转载:全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!
微信应用号(小程序,「应用号」的新称呼)终于来了! 目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」? 我们暂时以 ...
- eclipse svn插件安装方法
eclipse svn插件安装方法 使用dropins安装插件 从Eclipse3.5开始,安装目录下就多了一个dropins目录.只要将插件解压后拖到该目录即可安装插件.比如安装svn插件subcl ...