请看这个例子:

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

我正在开发一种类似的表单,其中包含一些用户可以通过单击复选框选择退出的数据。选中复选框时,我正在使用ng-disabled禁用相关字段(在我的示例中为“ Age”)。

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

这是我想做的:


即使用户已将数据输入到他们随后禁用的字段中,也要从模型中删除该数据。在示例中,如果选中了复选框,并且同时填写了“名称”和“年龄”,我希望我的用户对象仍然是:

{ "name": "John" }


而当前是:

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



另外,理想情况下:


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


我的第一个想法是我需要(基本上是同一件事,我想?):


根据复选框的选中状态,有条件地为“年龄”字段设置ng-model
选中复选框时,取消绑定“年龄”字段,而取消选中时,重新绑定该字段


但是,我该怎么做?还是有更简单的方法?

我已经玩了一段时间,但找不到指令或其他方法的组合来执行此操作,并且事实证明很难找到它。我现在正在研究文档,但是可以使用一些帮助。谢谢!

最佳答案

我将对复选框和文本框都使用指令。

根据您的代码笔,以下年龄控制指令可以做到:

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

09-10 11:01
查看更多