函数调用后未填充虚拟数组值答案

【问题标题】：Dummy array value not populating after function call函数调用后未填充虚拟数组值
【发布时间】：2018-04-09 01:52:14
【问题描述】：

我正在尝试创建基于国家/地区、基于城市的城市填充状态的下拉列表，但最初在页面加载时它包含先前从数组中提取的数据。在尝试调用 GetSelectedCountry 和 GetSelectedState 函数时，由于 mydata 包含在 ng 中而无法正常工作-model 和 dummy array 值在下拉列表中最初不显示页面加载时。以下是我的虚拟代码。

<head>
    <!--ajax library-->
    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script>
        //angular module code
        angular
        .module('myApp', [])
        .run(function($rootScope) {
                $rootScope.title = 'myTest Page';
            })
        .controller('testController', ['$scope',
                function($scope) {
                    //dummy array data

                    $scope.mydata = [

                        { "cID": 1014,"country": "USA","state" :"California"}
                    ];   

                    //country json to get selected state and city based on country
                    $scope.countries = {

                        'USA': {
                            'Alabama': ['Montgomery', 'Birmingham'],
                            'California': ['Sacramento', 'Fremont'],
                            'Illinois': ['Springfield', 'Chicago']
                        },
                        'Australia': {
                            'New South Wales': ['Sydney'],
                            'Victoria': ['Melbourne']
                        }
                    };
                    $scope.GetSelectedCountry = function() {
                        $scope.strCountry = $scope.country;
                    };
                    $scope.GetSelectedState = function() {
                        $scope.strState = $scope.state;
                    };
                }
            ])</script></head>
<!--HTML Code-->
<body ng-app="myApp">

    <div ng-controller="testController">   <label for="country">Country
            *</label>   <select id="country" name="country" ng-model="mydata .country" ng-options="country for (country, states) in countries"
        ng-change="GetSelectedCountry()">
            <option value=''>Select</option></select>   <label for="state">State *</label>   <select id="state"
        ng-disabled="!country" name="state" ng-model="mydata.state"
        ng-options="state for (state,city) in country"
        ng-change="GetSelectedState()">
            <option value=''>Select</option></select>   <label for="city">City *</label>   <select id="city" ng-disabled="!country
        || !state" ng-model="city" ng-options="city for city in state">
            <option value=''>Select</option>

        </select>

    </div>

</body>

【问题讨论】：

标签： javascript html css angularjs ajax

【解决方案1】：

因为您在 ng-model 中使用 mydata.country 和 mydata.state，所以在脚本中您可以通过

访问它们

  $scope.GetSelectedCountry = function() {
                    $scope.strCountry = $scope.mydata.country;
                };
                $scope.GetSelectedState = function() {
                    $scope.strState = $scope.mydata.state;
                };

否则，只需在您的 html 中更改国家和州的 ng-model 名称，例如

<select id="country" name="country" ng-model="country" ng-options="country for (country, states) in countries"
        ng-change="GetSelectedCountry()">
            <option value=''>Select</option></select>   <label for="state">State *</label>   
<select id="state" ng-disabled="!country" name="state" ng-model="state" ng-options="state for (state,city) in country"

附加一个有效的 plunker

https://plnkr.co/edit/zUyL9aGSWt9hysH4cjnT?p=preview

【讨论】：

我已经知道了，我实际上是在问你如何在他能够更改国家和州之后，如何在美国和加利福尼亚州等下拉列表中填充 $scope.mydata 数组数据