动态形式的唯一标识符（ng-repeat）

Question

我有一个表单，其中的输入文本以ng-repeat循环。

对于每个输入字段，都有一个开关，用户可通过该开关将“使用默认值”设置为YES / NO。

输入字段的每一行基本上都是两个字段，一次要隐藏一个字段，无论是要显示默认值（开关：是，输入文本=禁用）还是要设置自定义值（开关：否）

我需要每个元素都有一个唯一的标识符，以便能够在提交时将其保存，例如** id =“ title _ {{spec.id}}”。

开关起作用，以便使用开关变量创建2way绑定，但这是将保存到数据库的Switch-DIV中复选框的值。

我想我需要做的是将spec.id值应用于switch-variable =“ useDefaultValue _ {{spec.id}}”“并将相同的值设置为ng-show =” useDefaultValue _ {{spec.id}} “和NG-躲 ，但我不知道怎么样。

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>

Answer 1

由于您的复选框由与行相关的spec.defaultValue支持，因此您可以提供一个更简单的解决方案，并且不需要切换。 只需引用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>

顺便说一句，我也可以使用ng-if代替ng-show和ng-hide来减轻页面亮度并使过渡更加平滑。

编辑提交功能：

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

当然，这是假设您在用户上保存了规格值。 它们可以存储在其他地方。