Question

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

将嵌套对象添加到转发器后，我不了解ngModel和ngOptions如何发挥作用。我尝试了几种选择，但均未成功。

我添加了一个插件来帮助解释这个问题： 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"），但是您还必须更改更新后续下拉值的方式。

一旦添加到重复列表，则编辑嵌套选择选项

1 个答案: