在 AngularJS 中，如何在禁用表单字段时临时删除模型属性？

Question

请看这个例子：

http://codepen.io/troywarr/pen/zxWLeZ

我正在开发一个类似的表单，其中我有一些数据，用户可以通过单击复选框选择不输入这些数据。当复选框被选中时，我使用 ng-disabled 来禁用相关字段（在我的示例中为 "Age"）。

如果他们在将数据输入字段之前单击复选框，则效果很好。但是，如果他们在字段中输入数据，然后单击复选框将其禁用，数据将同时保留在模型和视图中；它刚刚被锁定，无法更改。

这是我想做的事情：

即使用户已将数据输入到随后禁用的字段中，也要从模型中删除该数据。在示例中，如果复选框被选中并且 "Name" 和 "Age" 都已填写，我希望我的用户对象仍然只是：
```
{ "name": "John" }
```
目前是：
```
{ "name": "John", "age": 35 }
```

此外，理想情况下：

也从视图中删除数据（即清空 "Age" 字段）。
使数据删除（从模型和视图中）可逆。如果用户将他们的年龄输入为 35，然后他们选中复选框以禁用它，他们将看到 "Age" 字段为空（并且 user 模型也将丢失 age 属性)。然后，如果他们取消选中该复选框，值 35 将 return 分配给 "Age" 字段和模型。换句话说，如果他们改变主意，不要失去他们的工作。
按比例执行此操作（例如，使用可重复使用的指令、相对简单的表达式或其他 DRY 方法），因为我的表单很复杂，有很多这种行为的实例，并且还会有其他类似的表单。

我的第一个想法是我需要（我想基本上是一样的东西？）：

根据复选框的选中状态有条件地为 "Age" 字段设置 ng-model
选中复选框时取消绑定"Age"字段，取消选中时重新绑定

但是，我该怎么做呢？或者有更简单的方法吗？

我已经尝试了一段时间，但找不到指令组合或其他方法来执行此操作，事实证明很难搜索到。我现在正在研究文档，但需要一些帮助。谢谢！

Answer 1

我会为复选框和文本框使用一个指令。

根据你的码笔，下面的年龄控制指令就可以了：

angular
  .module('example', [])
  .controller('exampleController', function($scope) {
    $scope.user = {};
  }).directive('ageControl',
    function() {
        return {
            template: '<input type="checkbox" ng-model="hideAge" ng-click="setAge()" />Hide Age<br />Age: <input type="text" ng-model="age" ng-disabled="hideAge" />',
            scope: {
              age: "="
            },
            link: function (scope, elem, attr) {
              var lastAge = null

              scope.setAge = function() {
                if (scope.hideAge) {
                lastAge = scope.age;
                scope.age = undefined;
              }  else {
                if (lastAge) {
                    scope.age = lastAge;
                }
              }
           }
        }
      }
   });

在这里工作代码笔：http://codepen.io/anon/pen/ZYxMQL

您只需要对标签进行参数化，使其适用于任何值。

更新

下面是一个指令示例，它允许复选框禁用一个或多个表单控件，从模型中删除相关值：

http://codepen.io/troywarr/pen/XJExaO?editors=101

Answer 2

理想的方法是使用 angular.copy() 函数。当您检查隐藏时，将数组或对象存储在 $scope 变量中。当您取消选中时，再次恢复。看到这个 example.

在 AngularJS 中，如何在禁用表单字段时临时删除模型属性？

In AngularJS, how to temporarily remove a model property when a form field is disabled?

javascript

forms

angularjs

angularjs-directive

angularjs-scope

在 AngularJS 中，如何在禁用表单字段时临时删除模型 属性？

In AngularJS, how to temporarily remove a model property when a form field is disabled?

javascript

forms

angularjs

angularjs-directive

angularjs-scope

在 AngularJS 中，如何在禁用表单字段时临时删除模型属性？