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

Question

请看一下这个例子:

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

我正在开发一个类似的表单，其中有一些数据，用户可以通过单击复选框选择不输入这些数据。当选中该复选框时，我使用 ng-disabled 禁用相关字段(在我的示例中为“年龄”)。

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

这就是我想做的:

• 即使用户已将数据输入到随后禁用的字段中，也会从模型中删除该数据。在示例中，如果选中复选框并填写“姓名”和“年龄”，我希望我的用户对象仍然只是:

  { "name": "John" }
  

  目前:

  { "name": "John", "age": 35 }
  

此外，理想情况下:

• 同时从 View 中删除数据(即清空“年龄”字段)。
• 使数据删除(从模型和 View 中)可逆。如果用户输入的年龄为 35，然后选中复选框以禁用它，他们会看到“年龄”字段为空(并且 user 模型也会丢失age 属性)。然后，如果他们取消选中该复选框，值 35 将返回到“年龄”字段和模型。换句话说，如果他们改变主意，也不会失去他们的工作。
• 大规模执行此操作(例如，使用可重用指令、相对简单的表达式或其他 DRY 方法)，因为我的表单很复杂，存在大量此行为的实例，并且还会出现其他类似的表单。

我的第一个想法是我需要(我认为基本上是同一件事？):

• 根据复选框的选中状态有条件地为“年龄”字段设置 ng-model
• 勾选复选框时取消绑定(bind)“年龄”字段，取消勾选时重新绑定(bind)“年龄”字段

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

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

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