请看这个例子:
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