首页 > 代码库 > angular可以做的小功能 未完成

angular可以做的小功能 未完成

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 =http://www.mamicode.com/=12) {
//停止定时器
$scope.state = "宝宝要吃饭了"
// angular中关闭定时器的方法
$interval.cancel($scope.timer);
}
})

}])

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

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

 

 

 

angular可以做的小功能 未完成