controller 和 ng-options
1.demo:
<!-- 下面是一个简单通过quantity和costs计算Total的示例 -->
<!-- 让我们增加一些逻辑,可以用不同的货币输入,计算和支付这个货单。 -->
<!-- 1 USD == 6 CNY == 0.8 EUR -->
<!-- 添加换算函数,添加 ocntroller,添加 pay 按钮 -->
<div ng-app="myApp" ng-init="number=1;cost=1" ng-controller="myCtr" class="wrapper">
<div class="money">
numebr:
<input type="number" ng-model="number" name="" min="0" id="">
<br>
cost:
<input type="number" name="" min="0" ng-model="cost" id="">
<select ng-model="inCurr" ng-options=" x for x in rate">
<option>{{ x }}</option>
</select>
<br>
<p ng-repeat="x in rate">
{{ total(x) | currency:x}}
</p>
<br>
<button ng-click="">pay</button>
<!-- you need pay <b>{{ number * cost | currency}}</b> -->
</div>
</div>
<script src='https://cdn.bootcss.com/angular.js/1.6.8/angular.js'></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtr',function($scope){
$scope.numebr = 1;
$scope.cost = 1;
$scope.rate = ['USD','EUR','CNY'];
$scope.inCurr = 'CNY';
$scope.totalRate = {
USD: 1,
EUR: 0.8,
CNY: 6
};
$scope.total = function total(outCurr){
// console.log(outCurr);
return $scope.convert($scope.number * $scope.cost,$scope.inCurr,outCurr)
};
$scope.convert = function covert(amount,inCurr,outCurr){
// console.log(amount);
// console.log(outCurr);
// console.log(amount * $scope.totalRate[outCurr]);
console.log(inCurr);
return amount * $scope.totalRate[outCurr] / $scope.totalRate[inCurr];
}
})
</script>
复制代码
1.1 思考上面的 demo
- 其中逻辑:
- 为了写了一个汇率转换的小组件,其中 EUR USD CNY 三种。
- 难点:
- select 其中 ng-options 配合 select 和 option 一起使用。x for x in items
- 函数
- total(x) 首先计算总值,然后再根据汇率进行换算。通过 ng-repeat 来遍历三种汇率的钱币。
service-factory
- 我们可以把 service 封装起来
- 使用 .factory 然后在返回这个 service 然后我们就可以使用 这个 service 作用就是返回一个有属性有方法的对象。
<script>
//创建模型
var app = angular.module('myApp', []);
//通过工厂模式创建自定义服务
app.factory('myFactory', function() {
var service = {};//定义一个Object对象'
service.name = "张三";
var age;//定义一个私有化的变量
//对私有属性写getter和setter方法
service.setAge = function(newAge){
age = newAge
}
service.getAge = function(){
return age;
}
return service;//返回这个Object对象
});
//创建控制器
app.controller('myCtrl', function($scope, myFactory) {
myFactory.setAge(20);
$scope.r =myFactory.getAge();
alert(myFactory.name);
});
</script>
复制代码
- 在自定义服务里注入服务示例,但不能注入$scope作用域对象。
<script
var app = angular.module('myApp', []);
app.factory('myFactory', function($http,$q) {
var service = {};
service.name = "张三";
//请求数据
service.getData = function(){
var d = $q.defer();
$http.get("url")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
d.reject("error");
});
return d.promise;
}
return service;
});
app.controller('myCtrl', function($scope, myFactory) {
//alert(myFactory.name);
myFactory.getData().then(function(data){
console.log(data);//正确时走这儿
},function(data){
alert(data)//错误时走这儿
});;
});
</script>
复制代码
service-service
- 通过service方式创建自定义服务,相当于new的一个对象:var s = new myService();,只要把属性和方法添加到this上才可以在controller里调用。
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{r}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.service('myService', function($http,$q) {
this.name = "service";
this.myFunc = function (x) {
return x.toString(16);//转16进制
}
this.getData = function(){
var d = $q.defer();
$http.get("ursl")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
alert(0)
d.reject("error");
});
return d.promise;
}
});
app.controller('myCtrl', function($scope, myService) {
$scope.r = myService.myFunc(255);
myService.getData().then(function(data){
console.log(data);//正确时走这儿
},function(data){
alert(data)//错误时走这儿
});
});
</script>
复制代码
service-provder
-
只有provder是能传 .config() 函数的 service。如果想在 service 对象启用之前,先进行模块范围的配置,那就应该选择 provider。需要注意的是:在config函数里注入provider时,名字应该是:providerName+Provider.
-
使用Provider的优点就是,你可以在Provider对象传递到应用程序的其他部分之前在app.config函数中对其进行修改。
-
当你使用Provider创建一个service时,唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。
<body>
<div ng-app="myApp" ng-controller="myCtrl">
</div>
<script>
var app = angular.module('myApp', []);
//需要注意的是:在注入provider时,名字应该是:providerName+Provider
app.config(function(myProviderProvider){
myProviderProvider.setName("大圣");
});
app.provider('myProvider', function() {
var name="";
var test={"a":1,"b":2};
//注意的是,setter方法必须是(set+变量首字母大写)格式
this.setName = function(newName){
name = newName
}
this.$get =function($http,$q){
return {
getData : function(){
var d = $q.defer();
$http.get("url")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
d.reject("error");
});
return d.promise;
},
"lastName":name,
"test":test
}
}
});
app.controller('myCtrl', function($scope,myProvider) {
alert(myProvider.lastName);
alert(myProvider.test.a)
myProvider.getData().then(function(data){
//alert(data)
},function(data){
//alert(data)
});
});
</script>
</body>
复制代码
过滤器中注入自定义服务
<body>
<div ng-app="myApp">
在过滤器中使用服务:
<h1>{{255 | myFormat}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</script>
</body>
复制代码