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>

<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的取值，赋值

相关文章