Question

请看一下这个例子：

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

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

如果他们在将数据输入字段之前单击复选框，则可以正常工作。但是，如果他们将数据输入到字段中，则然后单击复选框以禁用它，数据都保留在模型和视图中;它现在刚刚被改变了。

这是我想做的事情：

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

另外，理想情况下：

也从视图中删除数据（即清空“年龄”字段）。
使数据移除（来自模型和视图）可逆。如果用户输入的年龄为35，则他们会选中该复选框以将其停用，他们会看到“年龄”字段为空（user模型也会丢失age属性）。然后，如果取消选中该复选框，则值35将返回“年龄”字段和模型。换句话说，如果他们改变主意，不要失去工作。
大规模地这样做（例如，使用可重复使用的指令，相对简单的表达式或其他DRY方法），因为我的表单很复杂，有很多这种行为的实例，并且还会有其他类似的形式。

我的第一个想法是，我需要（基本上是同一件事，我想？）：

根据复选框的选中状态

ng-model

选中复选框后取消绑定“年龄”字段，并在取消选中时重新绑定

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

我已经玩了一段时间，但找不到指令或其他方法的组合来做到这一点，而且事实证明很难找到。我现在正在深入研究文档，但可以使用一些帮助。谢谢！

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;
                }
              }
           }
        }
      }
   });

在此处使用codepen：http://codepen.io/anon/pen/ZYxMQL

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

<强>更新

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

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

Answer 2

理想的方法是使用angular.copy()函数。检查隐藏时，将数组或对象存储在$ scope变量中。取消选中后，再次恢复。请参阅此example。

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

2 个答案: