首页 > 代码库 > 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可以做的小功能 未完成
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。