zoukankan      html  css  js  c++  java
  • AngularJS双向绑定,手动实施观察

    实现这样的一个需求:页面中某个地方显示某个文本框的值经过计算得到的结果,而且是文本框值每次变化显示的计算结果也跟着动态变化。

    在controller中可以声明一个对象,它的一个字段用来存储初始值:

    $scope.funding = {startingEstimate:0};

    以上,声明了一个funding对象,它的startingEstimate字段用来存储初始值,初始值这里是0.

    在controller中还应该声明一个函数,用来把根据初始值计算得到的结果赋值给funding对象的另外一个字段。

    $scope.computeNeeded = function(){
        $scope.funding.needed = $scope.funding.startingEstimate * 10;
    };

    以上,声明了computeNeeded函数,它把funding对象startingEstimate值进过计算后的结果赋值给了funding对象的另外一个字段needed。

    好了,页面中的input需要和funding对象的startingEstimate双向绑定起来,用ng-model;input中每次值变化需要调用computeNeeded,用ng-change

    初始值:<input type="text" ng-model="funding.startingEstimate" ng-change="computeNeeded()">

    至于显示结果,只管向funding对象的needed字段要就好了:

    计算值:{{funding.needed}}

    可是,还有一点小问题:现在,只有当input中的值发生变化的时候才会触发computeNeeded()方法,我们希望在页面加载的时候就执行computedNeeded方法。

    为此,AngularJS为我们准备了$scope.$watch(被观察对象,执行的动作),可以把funding对象的startingEstimate字段列为被观察对象,startingEstimate字段的每次变化,都执行computedNeeded()这个动作,包括给startingEstimate字段初始赋值的时候。

    $scope.$watch('funding.startingEstimate', $scope.computeNeeded);

    完整代码如下:

    <!doctype html>
    
    <html ng-app="myApp">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>Untitled Document</title>
    
        <script src="angular.min.js"></script>
    
        <script>
    
            var myApp = angular.module("myApp",[]);
    
            
    
            myApp.controller("MyController",['$scope',function($scope){
    
                $scope.funding = {startingEstimate:0};
    
                
    
                $scope.computeNeeded = function(){
    
                    $scope.funding.needed = $scope.funding.startingEstimate * 10;
    
                };
    
                
    
                $scope.$watch('funding.startingEstimate', $scope.computeNeeded);
    
                
    
                $scope.finish = function(){
    
                    alert("done");
    
                };
    
            }]);
    
        </script>
    
    </head>
    
    <body ng-controller="MyController">
    
        <form ng-controller="MyController" ng-submit="finish()">
    
            初始值:<input type="text" ng-model="funding.startingEstimate" ng-change="computeNeeded()">
    
            计算值:{{funding.needed}}
    
            
    
            <input type="submit" value="提交"> 
    
        </form>
    
    </body>
    
    </html>
    

    总结:

    ● 双向绑定:ng-model
    ● 文本框值变化事件:ng-change
    ● 对某个对象实施观察:$scope.$watch(被观察对象,执行的动作)
    ● 表单提交:ng-submit
    ● 其它事件:ng-click, ng-dblclick

    参考资料:<<用AngularJS开发下一代Web应用>>

  • 相关阅读:
    Ajax 异步请求返回集合遍历问题
    JS 类数组,字符串,转换成数组的方法
    laravel、TP、YII三个框架的优缺点对比
    纵深防御
    渗透测试小结
    常见的设计模式
    CDN简介
    WAF小介
    分布式事务及其常见的解决方案
    redis主从复制
  • 原文地址:https://www.cnblogs.com/darrenji/p/4851029.html
Copyright © 2011-2022 走看看