Question

我应该有以下代码：

.JS

angularcomponents.controller('CountryCntrl', ['$scope', function($scope) { 
    $scope.countries = {
                    'India': {
                        'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                        'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                        'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
                    },
                    'USA': {
                        'Alabama': ['Montgomery', 'Birmingham'],
                        'California': ['Sacramento', 'Fremont'],
                        'Illinois': ['Springfield', 'Chicago']
                    },
                    'Australia': {
                        'New South Wales': ['Sydney'],
                        'Victoria': ['Melbourne']
                    }
                };
}]);

和html：

<div ng-controller="CountryCntrl">
    <div class="col-sm-4">
        <select id="country" ng-model="states" ng-options="country for (country, states) in countries">
            <option value=''>
                Select
            </option>
        </select>
        <br>
        <small><em>Country</em></small>
    </div>
    <div class="col-sm-4">
        <select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states">
            <option value=''>
                Select
            </option>
        </select>
        <br>
        <small><em>States</em></small>
    </div>
    <div class="col-sm-4">
        <select id="city" ng-disabled="!cities || !states" ng-model="city">
            <option value=''>
                Select
            </option> 
            <option ng-repeat="city in cities" value='[[city]]'>
                [[city]]
            </option>
        </select>  
        <br>
        <small><em>City</em></small>      
    </div>
</div>

我不明白它如何约束城市，国家和州的正确价值观。在我的$ scope中没有任何标签可以识别它。

是否取决于数组的格式？

Answer 1

您不需要在javascript中定义变量（尽管您可能更喜欢） - 当您声明ng-model时，会在$ scope上为您创建变量。所以你的国家选择被绑定到一个模型状态，它最初没有价值。

由于您执行了country for (country, states)，因此该选择的标签是数组键，即国家/地区名称。该值绑定到数组值。因此，当您选择一个国家/地区时，$ scope.states将填充与该国家/地区对应的完整数组。

所以现在$scope.states中有一个数组，允许ng-options="state for (state,city) in states"构建一个选择器，依此类推。

您可以通过显示模型变量的内容来查看它。这是一个表示：https://jsfiddle.net/wbpm8bc7/

的小提琴

正如您所看到的，最初它没有显示任何内容，因为这些变量是空的。但是当您进行选择时，它们将填充数组。

NG模型和阵列 - 它是如何工作的？

1 个答案: