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 实现数据双向绑定

上一篇:http


下一篇:JS中访问对象的两种方式区别【转】