Question

在我的代码（下面的代码段示例）中，我有一个使用ng-model指令绑定到输入框的变量。然后，我有另一个变量，为了我的项目，它依赖于该绑定变量。

如果bar发生变化，我如何保持{在下面的示例中为foo更新？

我尝试使用$scope.$watch函数调用（我展示了我在下面使用的语法），但是当用户在输入框中输入内容时，不会调用绑定函数。

HTML

...
<div ng-controller="exampleController as ctr">
    ...
    <div><input type="number" ng-model="ctr.foo" /></div>
    <div>{{ ctr.bar }}</div>
</div>

的Javascript

app.controller('ExampleController', function($scope){
    var local = this;        

    this.foo = 5;
    this.bar = 10;

    this.updateBar = function(){
        this.bar = this.foo * 2;
    };

    $scope.$watch('foo', function(){
        local.updateBar();
    });
});

注意：所有这些只是示例代码，以显示我的问题。

Answer 1

如果您使用ng-change，则无需观看$ watch？ ;）

<div ng-controller="exampleController as ctr">
...
  <div><input type="number" ng-model="ctr.foo" ng-change="ctr.updateBar()" /></div>
  <div>{{ ctr.bar }}</div>
</div>

更多信息：https://docs.angularjs.org/api/ng/directive/ngChange

Answer 2

尝试使用范围功能：

HTML

<div ng-controller="exampleController">
    ...
    <div><input type="number" ng-model="foo" /></div>
    <div>{{ bar() }}</div>
</div>

的Javascript

app.controller('ExampleController', function($scope){      

    $scope.foo = 5;
    $scope.bar = function(){
          return  $scope.foo * 2;
    };

});

在输入中更改变量时更新其他变量

2 个答案: