码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS 实现数据双向绑定

时间:2020-06-17 18:36:38      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:cti   show   charset   ber   code   scope   src   app   lang   

金额=单价*数量

示例:

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

标签:cti   show   charset   ber   code   scope   src   app   lang   

原文地址:https://www.cnblogs.com/qiupiaohujie/p/13153869.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!