如何在angularjs中实现基于其他对象的对象更新

how in angularjs we can achieve the object update which is based on some other objects?

本文关键字：对象 其他 更新 于其他 angularjs 实现      更新时间：2023-09-26

我试图用添加方法(简单地增加它们的值)更新变量b和c的值，但a(两者的总和)没有反映此操作。

我知道我们可以使用$scope.$watch函数来更新它们，但是我有一个应用程序，其中有许多对象依赖于其他对象。如果我的依赖对象改变了，我希望我的对象也改变，而不使用任何$watchers。

这只是一个简单的例子，我试图在观察者的帮助下更新$scope.a和$scope.obj.a值。我该怎么做呢?

<html ng-app="app">
  <head>
    <title></title>
  </head>
  <body ng-controller="ctrl">
    a : {{a}}<br />
    b: {{b}}<br />
    c: {{c}}<br />
    <button ng-click="add();">Add</button>
    <br /><br /><br />
    obj.a : {{obj.a}}<br />
    obj.b: {{obj.b}}<br />
    obj.c: {{obj.c}}<br />
    <button ng-click="obj.add();">obj.Add</button>
    <script type="text/javascript" src="angular.min.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('ctrl', function ($scope) {
            $scope.b = 1;
            $scope.c = 2;
            $scope.a = $scope.b + $scope.c;

            $scope.$watch('b', function (newValue, oldValue) {
                $scope.a = $scope.b + $scope.c;
            });
            $scope.add = function () {
                $scope.b++;
                $scope.c++;
            };
            //this is object with dot property example
            $scope.obj = {};
            $scope.obj.b = 1;
            $scope.obj.c = 2;
            $scope.obj.a = $scope.obj.b + $scope.obj.c;

            $scope.$watch('obj.b', function (newValue, oldValue) {
                $scope.obj.a = $scope.obj.b + $scope.obj.c;
            });
            $scope.obj.add = function () {
                $scope.obj.b++;
                $scope.obj.c++;
            };
        });
    </script>
  </body>
</html>

您可以通过声明(或对象)来实现这一点。作为一个函数而不是一个对象/对象属性。每当该函数使用的任何属性发生变化时，Angular都会自动重新执行该函数，因此你的"a"值将会改变，而不需要你显式地定义这些表。

请看下面更新后的代码:

 var app = angular.module('app', []);
        app.controller('ctrl', function ($scope) {
            $scope.b = 1;
            $scope.c = 2;
            $scope.a = function() {return $scope.b + $scope.c};        
            $scope.add = function () {
                $scope.b++;
                $scope.c++;
            };
            //this is object with dot property example
            $scope.obj = {};
            $scope.obj.b = 1;
            $scope.obj.c = 2;
            $scope.obj.a = function() {
              return $scope.obj.b + $scope.obj.c;
            }
            $scope.obj.add = function () {
                $scope.obj.b++;
                $scope.obj.c++;
            };
        });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">
  <head>
    <title></title>
  </head>
  <body ng-controller="ctrl">
    a : {{a()}}<br />
    b: {{b}}<br />
    c: {{c}}<br />
    <button ng-click="add();">Add</button>
    <br /><br /><br />
    obj.a : {{obj.a()}}<br />
    obj.b: {{obj.b}}<br />
    obj.c: {{obj.c}}<br />
    <button ng-click="obj.add();">obj.Add</button>
  </body>
</html>

相关文章：