Angularjs 带两个变量的角度双向绑定

我有两个由函数关联的变量，用户应该能够在输入字段中更改其中一个，而输入字段应该自动更改另一个

我怎样才能做到这一点，现在我只是使用

$watch

两者

下面是一些示例代码和一个示例

JS

HTML

有很多方法可以做到这一点，使用
$watch
当然是其中之一。正如Matt所提到的，您还可以使用
ng change
指令在控制器上触发方法

我想提供的第三种方法是利用1.2中介绍的+

如果将控制器定义为JS对象而不是使用匿名函数，则可以向原型添加属性和方法：

myController = function () {
    this.map = {'A': 1,'B': 2,'C': 3,'D': 4};
    this._letter = 'A';
    this._number = 1;
};

现在，我们可以将您为将
字母
和
数字
值提取到函数中所做的工作提取出来：

myController.prototype.getLetterValue = function (num) {
    for (var key in this.map) {
        if (this.map.hasOwnProperty(key)) {
            if (this.map[key] === num) {
                return key;
            }
        }
    }
};

myController.prototype.getNumberValue = function (letter) {
    return this.map[letter];
};

最后，我们将在您的控制器上声明几个属性，这些属性使用封装了所需的功能

将此控制器添加到您的模块：

angular.module("test", [])
    .controller("MyController", myController);

最后，您只需要稍微修改绑定语法，以便使用新的控制器“as”语法。这将允许您直接绑定到控制器上的属性和方法，而不必使用
$scope

<div ng-app="test">
    <div ng-controller="MyController as ctrl">
        <input ng-model="ctrl.letter" />
        <input type="number" ng-model="ctrl.number" />
    </div>
</div>




总结
这并不是说代码更少，但确实有几个优点


您的控制器与
$scope
和
$watch
分离，使其更便于携带
控制器代码更易于阅读，因为所有功能都不是嵌套在匿名函数中的
该代码更具前瞻性，因为Angular的未来版本可能会通过使用本机可观测数据而完全消除
$scope
和
$digest
循环
这似乎是一件奇怪的事情。也可能看看ng的变化。+1+1太棒了。。。从未想过在这里使用getter和setter。但这太棒了…@xcorat-从您的小提琴到我创建的小提琴的最大变化是我使用了Angular 1.2+，这是
Controller'as'
语法的先决条件。此外，ES5在IE中不起作用
Object.defineProperty(
myController.prototype,
    "letter", {
    get: function () {
        return this._letter;
    },
    set: function (newValue) {
        this._letter = newValue;
        this._number = this.getNumberValue(this._letter);
    },
    enumerable: true,
    configurable: true
});

Object.defineProperty(
myController.prototype,
    "number", {
    get: function () {
        return this._number;
    },
    set: function (newValue) {
        this._number = newValue;
        this._letter = this.getLetterValue(this._number);
    },
    enumerable: true,
    configurable: true
});

angular.module("test", [])
    .controller("MyController", myController);

<div ng-app="test">
    <div ng-controller="MyController as ctrl">
        <input ng-model="ctrl.letter" />
        <input type="number" ng-model="ctrl.number" />
    </div>
</div>