您的位置：首页 > Web前端 > AngularJS

AngularJS双向绑定，手动实施观察

2015-10-01 15:09 731 查看
实现这样的一个需求：页面中某个地方显示某个文本框的值经过计算得到的结果,而且是文本框值每次变化显示的计算结果也跟着动态变化。在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应用>>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航