Select下拉列表框的使用:
<select ng-model="selected" ng-options="user.id as user.name for user in users | orderBy:'age' "></select>
1、添加“ng-model”指令,代表下拉框绑定的实体对象
2、添加“ng-options”指令,指令的形式四种:
① model.text for model in array;
② mode.value as model.text for model in array;
③ model.text grou by group for model in array;
④ model.value as model.text group by group for model in array;
以上②和④中的model.value是下拉列表各个项的value值,可以将其绑定为array数组中一个元素的的某个属性,也可直接绑定为array数组中单个元素对象,
即 mode as model.text for model in array;
3、为下拉框设置默认选中项,selected=users[0].id
服务(Service)
创建服务有多种种方式:Factory、Service、Provider、Decorator、Constant、Value
介绍几种常用创建服务方法:①Factory ②Service ③Provider
1、Factory可创建多个服务,然后将Factory名称注入到Controller中去,使用Factory对象来获取具体的服务对象。
2、Service只创建一个特定的具体服务,再注入到Controller中去使用。
3、Provider提供一个具体的服务+服务的配置信息。通过指定服务的配置信息,来实现一个服务的多种表现形式,以适配各种需求。
各创建服务的方式代码如下:
① Factory
app.factory(“myFactory”,function(){ var services={ “serviceName1”:function() { ... }, //服务1 “serviceName2”:function() { ... }, //服务2 “serviceName3”:function() { ... }, //服务3 …… }; return services; //将所有服务返回(工厂模式) })
应用:
var app = angular.module("app", []); //factory app.factory("factory", function ($http, $q) { var factory = { "getUsers": function () { var deferred = $q.defer(); // 声明延后执行,表示要去监控后面的执行 $http.post("/Demo/GetUsers") .success(function (data) { deferred.resolve(data); // 声明执行成功,即http请求数据成功,可以返回数据了 }); return deferred.promise; //返回promise对象 } }; return factory; }); //注入factory app.controller("serviceCtrl", function ($scope, factory) { var promise = factory.getUsers(); //调用factory中的service promise.then(function (data) { $scope.users = data; }); });
② Service
app.service(“myService”,function(){ var service = function() { ... } //具体服务 return service; //返回具体服务 })
应用:
//service app.service("service", function ($http, $q) { function getUsers() { var deferred = $q.defer(); // 声明延后执行,表示要去监控后面的执行 $http.post("/Demo/GetUsers") .success(function (data) { deferred.resolve(data); // 声明执行成功,即http请求数据成功,可以返回数据了 }); return deferred.promise; //返回promise对象 } return getUsers; }); //注入service app.controller("serviceCtrl", function ($scope, service) { $scope.getUsers= function () { var promise = service(); //直接调用service promise.then(function (data) { $scope.users = data; }); }; });
③ Provider
app.factory(“myProvider”,function(){ var provider={ “serviceName”:function() { ... }, //服务 “config”: { ... }, //配置信息 }; return provider; //将所有服务和配置信息返回(通过配置让服务表现不同结果) })
调用时,修改配置:
app.config(function(myProviderProvider){ myProviderProvider.config = {.....} //修改配置 });