添加到重复列表后编辑嵌套选择选项

Question

我正在尝试创建一个表单，该表单捕获国家/州/城市的嵌套流并推送到 ng-repeat 对象。将其添加到中继器后，我希望可以选择编辑该嵌套选择。

我不明白将嵌套对象添加到中继器后 ngModel 和 ngOptions 是如何发挥作用的。我尝试了几个选项都没有成功。

我添加了一个 plunker 来帮助解释这个问题： http://next.plnkr.co/edit/FWLa3ErI83JLR4Jy

这是有问题的部分无法正常工作：

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 = [];
};

寻求有关如何解决此问题的帮助。

谢谢

Answer 1

您的对象范围本质上存在问题。 （在这里阅读更多：https://docs.angularjs.org/guide/scope）

在您的 ng-repeat 中，为每个块创建一个子范围，该范围创建它自己的副本/引用在 ng-model 中指定的变量除非您将点模型用于模型属性（在使用 ng-model 时强烈推荐）。

例如，而不是 $scope.city = ... 和在你的 html 中 ng-model="city" 你应该这样做：

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

和你的 html 你会做ng-model="selection.city"

这将解决您的一个问题，但您可能仍会面临一些其他问题，因为您正在与主选择表单共享状态（或者您可能会接受这种行为）。我不确定您希望和/或计划如何在用户做出选择后更新“已编辑”位置，所以我不想提供更多建议，但将 ng-model 包含在其中可能是有意义的该表使用location（所以ng-model="location.city"）中的值，但是您还必须更改更新后续下拉值的方式。