html与js的取值，赋值

Posted 2020-08-23 宋赟鑫 https://meilishiyan-song.t

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

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>