首页 > 其他 > 详细

angular可以做的小功能 未完成

时间:2017-03-07 19:20:21      阅读:143      评论:0      收藏:0      [点我收藏+]

1,网上购物满多少减多少

思路:

效果图,满500减10元邮费

技术分享

1,html部分有基本布局,

<div>
<h3>化妆品</h3>
单价 <input type="text" ng-model="good.price"><br>
数量 <input type="text" ng-model="good.num">
运费 :{{good.yunfei | currency:‘元‘}}
总价: {{sum() | currency:‘元‘}}

</div>

2,script部分
angular.module(‘myApp‘, []).controller(‘myCtrl‘, [‘$scope‘, function($scope){

$scope.good = {
price:100,
num:1,
yunfei:10
}
//定义一个函数名字为num
$scope.num = function(){
return $scope.good.price*$scope.good.num+$scope.good.yunfei
}

//监听 总金额 目的是为了判断
$scope.$watch(‘$scope.sun‘, function(newV, oldV) {

if (newV>=500) {
$scope.good.yunfei= 0;
}else{
$scope.good.yunfei= 10;
}
});


}])

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

2,angular中的定时器

根据时间走,时间走到12现实宝宝要吃饭
<p>{{state}}</p>
<p>时间:{{time}}</p>

script部分
angular.module(‘myApp‘, []).controller(‘myCtrl‘, [‘$scope‘, ‘$interval‘,function($scope,$interval){

$scope.state = "宝宝在睡觉"
$scope.time = 6;

// 12点的时候显示 宝宝吃饭
$scope.timer = $interval(function(){
$scope.time++

// if ($scope.time == 12) {
// $scope.state = "宝宝要吃饭"
// }
},1000);


$scope.$watch(‘time‘,function(newValue,oldValue){

if (newValue ==12) {
//停止定时器
$scope.state = "宝宝要吃饭了"
// angular中关闭定时器的方法
$interval.cancel($scope.timer);
}
})

}])

用$scope.$watch监听,只要数据到达指定的变化就会更新

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

 

 

 

angular可以做的小功能 未完成

原文:http://www.cnblogs.com/wuyaxing/p/6516242.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!