zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    HTML5 History 模式 nginx配置
    nginx配置及性能调优
    windows启动jar包bat文件
    在线小工具
    BAT文件里Maven命令执行后退出的解决方案
    文字超出隐藏
    SOCKET.IO
    call与apply简单介绍
    html里面,没有内容,要高度占满页面
    css实现三角形标
  • 原文地址:https://www.cnblogs.com/qiupiaohujie/p/13153869.html
Copyright © 2011-2022 走看看