zoukankan      html  css  js  c++  java
  • 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>

    <script>
    //angular标准写法
    /*数据部分

    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>

  • 相关阅读:
    《原则》读书笔记
    mvn + testng + allure 生成自动化测试报告
    poj3264RMQ
    poj3928pingpong区间和
    uva11361数位dp
    Poj2795Exploring PyramidsDp
    uva11137Dp
    uva11375Dp
    三道组合题
    poj1379模拟退火
  • 原文地址:https://www.cnblogs.com/jessi/p/4745531.html
Copyright © 2011-2022 走看看