AngularJS 实现数据双向绑定
Posted 秋飘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS 实现数据双向绑定相关的知识，希望对你有一定的参考价值。
金额=单价*数量
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/angular.min.js"></script> </head> <body> <div ng-app="p1" ng-controller="ctron1" ng-init="gt"> <div ng-repeat="x in gt "> 名称： <span>{{x.name}}</span> 数量： <input type="number" ng-model="x.val1" ng-change="val1change(x)"> 单价： <input type="number" ng-model="x.val2" ng-change="val2change(x)"> 金额： <input type="number" ng-model="x.val3" ng-change="val3change(x)"> <span ng-show="x.fh" >返货</span> </div> </div> <script> var aa=[{name:‘hujie111‘,greeting:‘Hello ‘,val1:null,val2:null,val3:null,fh:false},{name:‘hujie222‘,greeting:‘Hello ‘,val1:null,val2:null,val3:null,fh:false}]; var app=angular.module(‘p1‘,[]); app.controller(‘ctron1‘,function ($scope) { $scope.gt=aa; $scope.val1change=function (x) { x.val3=x.val1*x.val2; x.fh=(x.val2!=null && x.val2==0); } $scope.val2change=function (x) { x.val3=x.val1*x.val2; x.fh=(x.val2!=null && x.val2==0); } $scope.val3change=function (x) { x.val2=x.val3/x.val1; x.fh=(x.val2!=null && x.val2==0); } }); </script> </body> </html>
以上是关于AngularJS 实现数据双向绑定的主要内容，如果未能解决你的问题，请参考以下文章