-------------------------------------------------- -------------------------------------------------- -------

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的取值,赋值的更多相关文章

  1. js表单快速取值/赋值 快速生成下拉框

    1.表单取值/赋值公共方法 //表单序列化:文本框的name字段和数据源一致<form id="myForm" onsubmit="return false;&qu ...

  2. Data层相关问题 &amp; JS循环取值

    第一次写博客,里面是自己工作中碰到的问题及总结的知识点,便于自己以后回顾,技术大牛们请直接忽略这篇文章,也希望能帮助到想我这样的小白! Data层相关问题总结: 1. 代码管理用的是 VSS 2005 ...

  3. JQuery关于span标签的取值赋值

    span取值赋值方法有别于一般的页面元素.JQ://赋值$("#spanid").html("hello world") //取值$("#spanid ...

  4. Jquery 关于span标签的取值赋值用法

    span是最简单的容器,可以当作一个形式标签,其取值赋值方法有别于一般的页面元素. //赋值 $("#spanid").html(value) //取值 $("#span ...

  5. Jquery操作下拉框(DropDownList)实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

  6. Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢)

    Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢) 1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val() ...

  7. winform 批量控件取值赋值

    以前写winform 最多写几个文本框,最近需要入录一个人员信息,那好几十个字段,一下子干蒙了,这要是一个个取值赋值都写到明天了,于是就自己写了个方法,也不是什么高大上的,就是很简单很普通很low的方 ...

  8. Dynamics 365-表单元素取值/赋值

    取值/赋值 参考: 山人丶 提示: 查找类型赋值时需指定目标实体,记录名称及id值 时间和日期类型赋值时需赋值Date类型 //获取new_name的值(单行文本) Xrm.Page.getAttri ...

  9. [King.yue]Ext.JS 弹出窗体取值赋值

    //从Grid取值 var name = Ext.getCmp(gridGridID).getView().getSelectionModel().getSelection()[0].data.Nam ...

随机推荐

  1. python 列表转换成字符串

    用字符串的 join 方法: li = ['a', 'b', 'c', 'd'] s = ''.join(li) print(s) abcd 用字符串的占位符替换 li = ['a', 'b', 'c ...

  2. UESTC 1256 昊昊爱运动 Map

    昊昊爱运动 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) 昊昊喜欢运动 他N天 ...

  3. django入门与实践 - 关于升级到django 3.7,三种模板超链接配置(编辑中)

    第一种方法: 在myblog/urls.py模块中: from django.contrib import admin from django.urls import path, include ur ...

  4. 用with打开文件

    rep_word = 'The piece is gone, left the puzzle undone' # \ 换行,跟shell一样 with open('nothing', 'r', enc ...

  5. IEEE 754二进制浮点数算术标准

    可能很多人都遇到过浮点数精度丢失的问题,下面以JavaScript为例. 1 - 0.9 = 0.09999999999999998 纳尼,不应该是0.1么,怎么变成0.099999999999999 ...

  6. VS2010 运行时 出现cmd窗口的设置方法

     项目 - 属性 -生成事件 --后期生成事件 ->命令行 (editbin /SUBSYSTEM:CONSOLE $(OUTDIR)\$(ProjectName).exe)        注: ...

  7. Selenium 设置代理chrome

    1.1. 连接无用户名密码认证的代理 from selenium import webdriver chromeOptions = webdriver.ChromeOptions() chromeOp ...

  8. Spring Boot中使用log4j实现http请求日志入mongodb

    之前在<使用AOP统一处理Web请求日志>一文中介绍了如何使用AOP统一记录web请求日志.基本思路是通过aop去切web层的controller实现,获取每个http的内容并通过log4 ...

  9. JAVA面试-HIBERNATE与 MYBATIS的对比

    JAVA面试中问及HIBERNATE与 MYBATIS的对比,在这里做一下总结   我是一名java开发人员,hibernate以及mybatis都有过学习,在java面试中也被提及问道过,在项目实践 ...

  10. Ansible 小手册系列 十六(Playbook Debug)

    debug模块在执行期间打印语句,并且可用于调试变量或表达式,而不必停止playbook. 打印自定义的信息 - debug: msg="System {{ inventory_hostna ...