Question

我有一个带有输入文本的表单，这些表单在ng-repeat中循环。

对于每个输入字段，都有一个用户设置的开关＆＃34;使用默认值＆＃34;到是/否。

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

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

交换机的工作方式是使用 switch-variable 来创建2路绑定，但它是Switch-DIV中将保存到数据库的复选框的值。

我认为我需要做的是将 spec.id 值应用于 switch-variable =＆＃34; useDefaultValue _ {{spec.id}}＆＃34; < / strong>并将相同的值设置为 ng-show =＆＃34; useDefaultValue _ {{spec.id}}＆＃34; 和 ng-hide ，但我不知道怎么做。

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

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

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

1 个答案: