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：

初始值：

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

计算值：{{funding.needed}}

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

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

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

完整代码如下：

        初始值：

        计算值：{{funding.needed}}

总结：

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！