角度输入模型有条件地从一个属性读取，写入另一个属性

Angular input model conditionally reads from one property, writes to another

本文关键字：属性 一个 读取 另一个 模型 输入 有条件      更新时间：2023-09-26

我有一个 Person 类，其中对该人的编辑必须由管理员用户验证。

每个属性都有一个"已批准"和"tmp"版本。有时未设置"tmp"版本：

person = {first:'Bob', firstTmp:'Robert', last:'Dobbs', lastTmp:undefined}

显示人员时，如果设置了"tmp"值，我想显示"tmp"值，否则显示"已批准"值。写入时，我想写入"tmp"值（除非以管理员身份登录）。

理想情况下，这不需要大量的自定义标记，也不需要为每个属性编写覆盖方法（大约有 100 个）。像这样的东西会很好：

<input ng-model="person.first" 
       tmp-model="person.firstTmp" 
       bypass-tmp="session.user.isAdmin" />

显示值时，如果已定义 tmp 值，则显示该值。否则显示批准的值。

写入

值时，除非以管理员身份登录，否则请写入 tmp 值。 管理员直接写入批准的值。

在 Angular 中实现这一点的干净方法是什么？

  • 以某种方式扩展 NgModelController ？
  • 在输入上使用过滤器/指令？
  • 掩护方法？
  • 只是在服务器端编写？

我将尝试一一介绍您的选项：

以某种方式扩展 NgModelController ？

我认为这不是一个好主意。如果出现问题，你不知道你是否可以依靠像ng-model这样基本的东西，那就不好

了

只是在服务器端编写？

这似乎是更简单的方法（如果您已经知道或发现在后端管理它很容易），尽管交互需要向服务器发出新的请求。

在输入上使用过滤器/指令？

我相信这将是最好的方法，因为只需查看标记就很容易理解发生了什么。它是有角度的，您已经知道像tmp-model这样的某些属性正在扩展标记。

掩护方法？

这也很容易实现，并且您将在 cover 方法中实现某种"业务逻辑"作为验证器。

鉴于我在答案中扩展了一点，我可以给你一个最后一个的内联示例。

<input  ng-model="person.firstTmp"
        ng-init="person.firstTmp = person.firstTmp || person.first"
        ng-change="updateProperty(person, 'first')" />

在控制器上，您可以执行以下操作：

$scope.updateProperty = function(person, propertyName) {
    // The temporary property has already been changed, update the original one.
    if($scope.session.user.isAdmin)
        person[propertyName] = person[propertyName + 'Tmp'];
}
相关文章：