Unique identifiers in dynamic form (ng-repeat)

Question

I have a form with input texts that are looped in a ng-repeat.

For every input field there is a switch with which the user sets "Use default value" to 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}}".

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.

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.

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

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. Just reference spec.useDefaultValue instead of your current useDefaultValue to directly access it.

<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.

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.