Editing Nested Select Options Once Added to Repeated List

Question

I'm trying to create a form that captures a nested flow for the country/state/city and pushes to ng-repeat object. Once it's added to the repeater, I'd like to have the option to edit that nested selection.

I'm not understanding how ngModel and ngOptions come into play once an nested object is added to a repeater. I've tried a few options without success.

I've added a plunker to help explain the issue: http://next.plnkr.co/edit/FWLa3ErI83JLR4Jy

This is the portion in question that isn't working right:

HTML

<tr ng-repeat="location in locations">
                <td>
                    <select ng-show="editable" name='CountryName' id="CountryName" class="form-control" ng-model="country" ng-options="country as country.CountryName for country in countries"
                 required>
            <option value="" disabled>Select</option>
        </select>
                    <span ng-show="!editable">{{location.CountryName}}</span>
                </td>
                <td>
                    <select ng-show="editable" name='StateName' required id="StateName" class="form-control" ng-disabled="states.length == 0" ng-model="state" ng-options="state as state.StateName for state in states">
            <option value="" disabled>Select</option>
        </select>
                    <span ng-show="!editable">{{location.StateName}}</span>
                </td>
                <td>
                    <select ng-show="editable" name='CityName' required id="CityName" class="form-control" ng-disabled="cities.length == 0" ng-model="city" ng-options="city as city.CityName for city in cities">
            <option value="" disabled>Select</option>
        </select>
                    <span ng-show="!editable">{{location.CityName}}</span>
                </td>
                <td><a class="btn btn-link" ng-click="editable = !editable">Edit</a></td>
            </tr>

JS

$scope.recordLocation = function() {
    $scope.locations.unshift({
        CountryName: $scope.country.CountryName,
        StateName: $scope.state.StateName,
        CityName: $scope.city.CityName
    });
    $scope.city = {};
    $scope.state = {};
    $scope.country = [];
};

Looking for assistance on how to solve this issue.

thanks

Answer 1

You are essentially having an issue with the scope of your objects. (read more here: https://docs.angularjs.org/guide/scope)

Within your ng-repeat, there is a child scope being created for each block which creates it's own copy/reference of the variable specified in ng-model unless you use the dot model for model properties (which is very highly recommended when using ng-model).

For instance, instead of having $scope.city = ... and in your html ng-model="city" you should instead do something like:

$scope.selection = {
  city: "",
  state: "",
  country: ""
}

and your in html you would do ng-model="selection.city"

That would solve one of your problems but you would probably still face some other issues because you are sharing state with the main selection form (or maybe you would be ok with that behavior). I'm not sure how you want to and/or plan to update the "edited" location after a user makes their selections so I don't want to give much more advice, but it might make sense to have the ng-model within the table use values in location (so ng-model="location.city") but then you would also have to change how you update the subsequent drop down values.