在JavaScript中定义的Angular.js模型中，需要将一个属性作为函数进行评估

Angular.js model defined in JavaScript, one property needs to be evaluated as a function

本文关键字：属性 一个 函数 评估 Angular 定义 JavaScript js 模型      更新时间：2023-09-26

我在JS中定义了我的模型，如下所示：

$scope.requirement = {
  id: function() {
    if($scope.dada || $scope.lala) {
      return $scope.dada
    }
    return $scope.haha
  }
}

这些变量是无稽之谈，但假设它们是定义的（在我的情况下，这只是一个例子）。

然后在带有Angular指令的HTML中，我有一个这样的输入：

<input type="text" ng-model="requirement.id" placeholder="ID">

函数返回的值不是requirement.id的值。我如何传递上面这样的函数，但让Angular.js计算函数并使用返回值？

编辑：

我尝试了这个，但没有成功：

$scope.requirement = {
  id: null
}
if($scope.dada || $scope.lala) {
  $scope.requirement.id = $scope.haha;
}

当我运行console.log(requirement)时，值会发生更改，但它并不代表视图中的新值。视图中的输入仍然显示null

如果要进行双向绑定，则需要将id定义为具有一个参数的getter/setter函数。因此，当传递一个值时，它充当一个setter，更新模型。否则，它只会根据您的逻辑获得当前值。

$scope.requirement = {
  id: function(newId) {
    if (arguments.length) {
       $scope.dada = newId;
    }
    return ($scope.dada || $scope.lala) ? $scope.dada : $scope.haha;
  }
}

您必须更新输入元素并添加ng模型选项属性。

<input type="text" ng-model="requirement.id" ng-model-options="{ getterSetter: true }" />

如果您只是在谈论单向绑定，那么您不需要使用getter/setter或ng模型。

<input type="text" value="{{requirement.id()}}" readonly />

ng模型是双向绑定的，您定义它的方式是requirement.id返回一个函数对象（它不执行函数），但更重要的是，当人们填写您的输入字段时，它会覆盖该对象，因为您告诉Angular将输入框的值放入requirement.id变量中。如果您只需要获取值，请使用｛｛requirement.id（）｝｝或更可读的｛{requirement.getId（）｝｝。

如果您确实需要使用函数进行双向绑定，请使用Daniel的解决方案。

相关文章：