當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

angular js勾选双向交互功能

發布時間：2023/12/24 综合教程 31 生活家

生活随笔收集整理的這篇文章主要介紹了 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>

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勾选双向交互功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。