ng-options下拉列表指令
ng-options="fruit.name for fruit in main.fruitArr"
fruit 是通过遍历 main.fruitArr 取出的每一个对象
fruit.name 是取出 fruit对象中的 name属性值
注意: ng-options指令需要与ng-model同时使用
默认选中 设置的选中项
ng-model="main.selected"
ng-options="fruit.name as fruit.name for fruit in main.fruitArr"
第一个fruit.name是select 选中的内容,和前面的ng-model绑定的值一样
ng-include包含指令
ng-include三种引入模版：
以属性形式
<div ng-include=""></div>
以元素形式
<ng-include src=""></ng-include>
以类名形式
<div class="ng-include: main.template.url"></div>
路由
第一步引入angular-route.js
angular.module('myApp',['ngRoute'])
在.config()中配置路由
/**
*第一个参数: 路径(地址栏中#号后面的内容),第二个参数: 路径对应的模版和控制器
*/
$routeProvider.when('/home',{
//模版路径
templateUrl: 'home.html',
//模版对应的控制器, 相当于以前写的 ng-controller, 模版中可以使用控制器作用域中的方法和属性
controller: 'homeController'
});
//其他情况下的模版和控制器(参数可以是字符串或对像)
$routeProvider.otherwise('/home');
$routeProvider.后面接when与otherwise，可以链式操作
如:
$routeProvider
.when('/user',{
templateUrl: 'user.html',
controller: 'userController'
})
.when('/other',{
templateUrl: 'user.html',
controller: 'userController'
})
.otherwise('/home');
路由与ng-view指令结合使用
ng-view用来承载模版，三种使用方式
以元素形式
<ng-view></ng-view>
以类名形式
<div class="ng-view"></div>
以属性形式
<div ng-view></div>
如:
<body ng-app="myApp">
<!-- ng-view用来承载模版,有三种形式 -->
<!--<ng-view></ng-view>-->
<!-- 类名形式 -->
<!--<div class="ng-view"></div>-->
<!-- 属性形式 -->
<div ng-view></div>
</body>
在控制器中可以通过$location.path('/home');来改变路由
$scope.main = {
name: 'user页面',
toHomeView: function () {
$location.path('/home');
}
}
when()中的参数
第一个是路由路径
第二个是配置参数
template:对应的页面模版
templateUrl：对应的模版路径
controller：对应的控制器
resolve:该属性会以健值对对象的形式，给相关的路由的控制器绑定服务或值。然后把执行的结果或服务引用，注入到控制器中。注意：与factory()结合使用
redirectTo:重定向路径地址
reloadOnSearch: true/false 如果为true，每次查询串发生变化都会引起路由刷新；如果味false，查询串发生变化不会引起路由变化
如：
1、template: '<div>other模版</div>',
2、templateUrl: 'home.html',
3、controller: 'homeController',
4、resolve: {
//该对象的属性与服务都可以注入到homeController控制器中使用
//属性值必须是服务的名字
res: 'cool',
//函数参数必须是服务的名字
getData: function (GetData) {
return GetData;
},
getDataTwo: function (GetDataTwo) {
return GetDataTwo.getDataJson;
}
}
.factory('cool',function () {
return 'cool';
})
.factory('GetData',['$http',function ($http) {
return function () {
return $http({method: 'get',url: 'data/news.json'});
};
}])
.factory('GetDataTwo',['$http',function ($http) {
return {
getDataJson: $http({method: 'get', url: 'data/news.json'})
};
}])
5、（1）redirectTo: '/home'
（2）
/**
* @param a 对象,里面的属性都是路由参数
* @param b 路由路径
* @param c 查询串对象
* @returns {string}
*/
redirectTo: function (a,b,c) {
console.log([a,b,c]);
return '/home';
}
在控制器中设置查询串
$location.search('password=123');
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
