[英]Unique identifiers in dynamic form (ng-repeat)
I have a form with input texts that are looped in a ng-repeat. 我有一个表单,其中的输入文本以ng-repeat循环。
For every input field there is a switch with which the user sets "Use default value" to YES/NO. 对于每个输入字段,都有一个开关,用户可通过该开关将“使用默认值”设置为YES / NO。
Every row of input fields are basically two fields, with one hidden one at a time, whether you want to show the default value (switch: YES, input text = disabled) or set a custom value (switch: NO) 输入字段的每一行基本上都是两个字段,一次要隐藏一个字段,无论是要显示默认值(开关:是,输入文本=禁用)还是要设置自定义值(开关:否)
I need each element to have a unique identifier to be able to save it on submit, for example **id="title_{{spec.id}}". 我需要每个元素都有一个唯一的标识符,以便能够在提交时将其保存,例如** id =“ title _ {{spec.id}}”。
The switches work so that the switch-variable is used to create 2way binding, but it is the value of the checkbox within the Switch-DIV that will be saved to the database. 开关起作用,以便使用开关变量创建2way绑定,但这是将保存到数据库的Switch-DIV中复选框的值。
What I think I need to do is apply the spec.id value to the switch-variable="useDefaultValue_{{spec.id}}" and set the same value to the ng-show="useDefaultValue_{{spec.id}}" and ng-hide , but I don't know how to. 我想我需要做的是将spec.id值应用于switch-variable =“ useDefaultValue _ {{spec.id}}”“并将相同的值设置为ng-show =” useDefaultValue _ {{spec.id}} “和NG-躲 ,但我不知道怎么样。
HTML: HTML:
<div class="row form-group" ng-repeat="spec in specsList">
<div class="col-xs-6 col-md-6">
<label for="specification_">{{spec.title}} <span ng-show="spec.unit.length">({{spec.unit}})</span></label>
<input class="form-control" type="text" name="title_{{spec.id}}" id="title_{{spec.id}}" placeholder="Not visible" ng-model="spec.value" ng-hide="useDefaultValue">
<input class="form-control" type="text" ng-model="spec.defaultValue" ng-show="useDefaultValue" disabled>
</div>
<div class="col-xs-6 col-md-6">
<label for="useDefaultValue_">Use default value</label> - {{spec.useDefaultValue}}<br />
<div class="switch" init-switch switch-variable="useDefaultValue">
<input type="checkbox" id="useDefaultValue_{{spec.id}}" name="useDefaultValue_{{spec.id}}" ng-model="spec.useDefaultValue">
</div>
</div>
</div>
Since your checkbox is backed by the row-dependent spec.defaultValue, you can come up with a simpler solution and don't need the switch. 由于您的复选框由与行相关的spec.defaultValue支持,因此您可以提供一个更简单的解决方案,并且不需要切换。 Just reference spec.useDefaultValue
instead of your current useDefaultValue
to directly access it. 只需引用spec.useDefaultValue
而不是当前的useDefaultValue
即可直接访问它。
<div class="row form-group" ng-repeat="spec in specsList">
<div class="col-xs-6 col-md-6">
<label for="specification_">{{spec.title}} <span ng-show="spec.unit.length">({{spec.unit}})</span></label>
<input class="form-control" type="text" name="title_{{spec.id}}" id="title_{{spec.id}}" placeholder="Not visible" ng-model="spec.value" ng-hide="spec.useDefaultValue">
<input class="form-control" type="text" name="title_{{spec.id}}" id="title_{{spec.id}}" ng-model="spec.defaultValue" ng-show="spec.useDefaultValue" disabled>
</div>
<div class="col-xs-6 col-md-6">
<label for="useDefaultValue_">Use default value</label> - {{spec.useDefaultValue}}<br />
<input type="checkbox" ng-model="spec.useDefaultValue">
</div>
</div>
As an aside, I would also use ng-if
instead of ng-show
and ng-hide
to lighten the page and make the transitions smoother. 顺便说一句,我也可以使用ng-if
代替ng-show
和ng-hide
来减轻页面亮度并使过渡更加平滑。
EDIT Submit function : 编辑提交功能:
$scope.submit = function() {
angular.forEach(specsList, function(spec, index) {
if (spec.useDefaultValue) {
$scope.user[spec.title] = spec.defaultValue;
}
else {
$scope.user[spec.title] = spec.value;
}
});
User.save(user).$promise.then(function(persisted) {
// do some post-save cleanup
});
};
Of course, this is assuming you save spec values on the user. 当然,这是假设您在用户上保存了规格值。 They could be stored somewhere else. 它们可以存储在其他地方。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.