如何实现input输入时和值为空时的状态变化
2016-11-04 10:52
429 查看
下面以一段代码进行演示,其中涉及的知识点为angular的element元素(angular中jqLite的写法)和angular中的$watch事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>$apply()、$timeout()、$watch()</title>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<div>
单价:{{order.price}}
</div>
<input type="text" ng-model="money" ng-change='go()' id='in'/>
</div>
<div>
数量: <select ng-model="order.num" ng-options="item for item in numOptions"></select>
</div>
<div>
总价:{{sum()}}
</div>
<div>
运费:{{order.ship}}
</div>
<div>
<button ng-click="submit()">Submit</button>
</div>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.go=function(){
angular.element('#in').css('backgroundColor','green');
angular.element('#in').css('color','yellow');
$scope.$watch($scope.money,function(newVal,oldVal){
if(newVal==null){
angular.element('#in').css('backgroundColor','white');
}
})
}
$scope.numOptions = [1, 2, 3];
$scope.order = {
price:50,
num:3
};
$scope.sum = function(){
return $scope.order.price * $scope.order.num;
};
// 用户点击“Submit” button 后执行的方法
$scope.submit = function(){
console.log($scope.ship);
};
// 监听 $scope.sum 的改变
$scope.$watch($scope.sum, function(newVal, oldVal){
// newVal 是 $scope.sum() 最新计算出来的值,oldVal 是 上一次计算出来的值
$scope.ship = newVal > 100 ? 0 : 10;
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>$apply()、$timeout()、$watch()</title>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<div>
单价:{{order.price}}
</div>
<input type="text" ng-model="money" ng-change='go()' id='in'/>
</div>
<div>
数量: <select ng-model="order.num" ng-options="item for item in numOptions"></select>
</div>
<div>
总价:{{sum()}}
</div>
<div>
运费:{{order.ship}}
</div>
<div>
<button ng-click="submit()">Submit</button>
</div>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.go=function(){
angular.element('#in').css('backgroundColor','green');
angular.element('#in').css('color','yellow');
$scope.$watch($scope.money,function(newVal,oldVal){
if(newVal==null){
angular.element('#in').css('backgroundColor','white');
}
})
}
$scope.numOptions = [1, 2, 3];
$scope.order = {
price:50,
num:3
};
$scope.sum = function(){
return $scope.order.price * $scope.order.num;
};
// 用户点击“Submit” button 后执行的方法
$scope.submit = function(){
console.log($scope.ship);
};
// 监听 $scope.sum 的改变
$scope.$watch($scope.sum, function(newVal, oldVal){
// newVal 是 $scope.sum() 最新计算出来的值,oldVal 是 上一次计算出来的值
$scope.ship = newVal > 100 ? 0 : 10;
});
});
</script>
</body>
</html>
相关文章推荐
- CSS实现当鼠标移到input上时鼠标变为不可输入的状态
- 通过jq来监听input的输入状态,实现角标的显示/隐藏
- 如何实时监听 input 和 textarea输入框值的变化
- 如何实现 linux 在 命令行模式(init 3)状态下不用输入用户名自动登陆
- 如何 实现 input 判断客户输入的首字母必须为m
- input输入系统中是如何实现按键重复
- jquery+css 实现即时变化颜色主题(通过input输入颜色值进行改变)
- 如何实现 linux 在 命令行模式(init 3)状态下不用输入用户名自动登陆
- 关于输入框input如何实现只可以选择不可以键盘输入
- 如何 实现代码编辑状态下 安全过滤html标签
- VC下在对话框上直接输入字母或文字的实现 (Input word on CDialog directly)
- 图像的单步撤销和重做怎么实现,如何记录状态
- 输入文字自动变化宽度的INPUT ,带计数(图)
- 实现两个INPUT同步输入
- 如何实现在屏幕中可以输入负数
- 如何实现在屏幕中可以输入负数
- 重写struts标签,实现错误输入项目背景色自动变化。
- 如何去掉TextBox可输入状态时的光标
- richTextBox如何实现输入指定的字符显示一个表情图标?类似QQ那样?
- 一个sql语句实现状态来回变化的方法