在ng-model中传递函数

时间:2014-03-13 08:58:35

标签: javascript angularjs

将函数传递给ng-model是否可行,例如

<input type="text" name="email" class="form-control" ng-model="createModel('email')" ng-change="addProperty(email,'email')" email required placeholder="Email">

ng-change工作正常,但ng-model="createModel(email)"显示此错误

> Expression 'createModel('email')' is non-assignable. Element: <input
> type="text" name="email"....

在控制器中,我有: //我只想暂时传递值

  $scope.createModel = function(modelName){
     console.log("Model name"+modelName);
  }

我在互联网上看到人们这样做的例子

2 个答案:

答案 0 :(得分:24)

看起来AngularJS在版本1.3中添加了“getter”“setter”支持

您可以在以下位置滚动到ngModel文档页面的底部:

https://docs.angularjs.org/api/ng/directive/ngModel

这允许您在ngModel属性中指定方法而不是变量。该方法应该采用可选参数。如果传递了一个参数,它应该存储该值,如果没有传递参数,它应该返回一个值。

您可以在另一个Stack Overflow答案中看到一个示例:https://stackoverflow.com/a/28224980/984780

答案 1 :(得分:19)

无法将函数传递给ng-model,因为当用户更改输入值时,Angular必须能够设置值。当值改变时,您无法告诉Angular调用函数。您可以做的是使用getter和setter方法在作用域上定义属性,如:

var email = 'test@test.com';
Object.defineProperty($scope, 'email', {
  get: function() {
    return email;
  },
  set: function(value) {
    email = value;
  }
});

但是我会说你最好为该物业创造一个$ watch,因为其他Angular开发者会更熟悉。

编辑: 要根据其他值绑定到不同的模型,您仍然绑定到ng-model中的同一属性,但您可以在监视中交换它。像这样:

var model1 = {
  value: 'hi'
};
var model2 = {
  value: 'hello'
};
$scope.model = model1;

$scope.checkboxValue = true;
$scope.$watch('checkboxValue', function(value) {
  if (value) {
    $scope.model = model1;
  } else {
    $scope.model = model2;
  }
});

<input type="text" ng-model="model.value">
<input type="checkbox" ng-model="checkboxValue">

这将改变文本输入的值,具体取决于是否选中了复选框。