Question

所以，我正在为我的Angular应用程序提供这种出色的数据模型方法，让我可以做这样的奇特之处：

var product = productModel.create();
product.set('name', 'Widget');
product.set('price', 12.99);
product.set('quantity', 46);
product.save().success(function() {
    alert('It saved!');
});

但后来我意识到......这不适用于ng-model :(

<form>
    <div>
        <label>Name</label>
        <input type="text" ng-model="product.get('name')" />
    </div>
    <div>
        <label>Quantity</label>
        <input type="text" ng-model="product.get('quantity')" />
    </div>
    <div>
        <label>Price</label>
        <input type="text" ng-model="product.get('price')" />
    </div>

    <input type="submit" value="Save" />
</form>

当我在输入字段中输入文字时，我得到了这个

错误：[ngModel：nonassign] Expression'product.get（'name'）'是不可转让。元素：<input type="text" ng-model="product.get('name')" class="ng-pristine ng-untouched ng-valid">

显然这是因为Angular希望绑定变量，而是试图绑定函数调用。

我真的想保留这种使用get（）和set（）的模型方法。如何使用ng-model完成此工作并仍然具有双向绑定？必须有办法......

Answer 1

//when creating the {get: ..., set: ...} object, also add this method:
product.bind = function(key) {
  var obj = this
  return function(val) {
    if (angular.isDefined(val)) {
      obj.set(key, val)
    }
    return obj.get(key)
  }
}

然后在HTML中：

<form ng-model-options="{getterSetter: true}">
  <input ng-model="product.bind('name')">
</form>

请参阅http://plnkr.co/edit/1GyWhswyO43R6nm49hHP?p=preview

如何在AngularJS中使用ng-model双向绑定功能？

1 个答案: