angular js勾选双向交互功能
1，下載框架包
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div id="div1" ng-controller="Aaa">
<p>總價：{{oldPrice}()}</p>
<p>個數：<input type="text" ng-model="num"></p>
<p>郵費：{{target}}</p>
<p>單價：<input type="text" ng-model="price"></p>
</body>
</html>
<script src="js/angular.min.js"></script>
<script>
//angular標準寫法
/*數據部分
function Aaa($scope){
$scope.name="hello";
}
/*1，擴展性
2，雙向交互
*/
var m=angular.module("myAPP",[]);
m.controller("Aaa",["$socpe",fuction($scope)
{
$scope.price=2000;
$scope.num=5;
$scope.target=15;
$scope.oldPrice=(){
return $scope.price*$scope.num+$scope.target
}
//數據監聽接口
$scope.$watch($scope.num,funtion(newVal,oldVal))
{
console.log(newVal);
console.log(oldVal);
return $scope.target=neVal>=9999?0:15;
}]);
</script>
總結
以上是生活随笔為你收集整理的angular js勾选双向交互功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ES索引误删的名场面
- 下一篇： UNION ALL合表查询