jquery - 第二次更改下拉框时出错

Question

所以我有两个下拉框，第一个下拉框响应是在加载页面时生成的，第二个下拉框响应是在更改第一个下拉框响应时生成的

 <div class="form-group">
    <select name="country_city" class="inputbox" required ng-model="frm.country_city" ng-change="state_city()">
        <option ng-repeat="country in country_city track by $index" value="{{country.id}}">{{country.name}}</option>
    </select>
</div>

<div class="form-group">
    <select name="state_city" class="inputbox" required ng-model="frm.state_city">
        <option ng-repeat="state in state_city track by $index" value="{{state.id}}">{{state.name}}</option>
    </select>
</div>

$scope.state_city = function() {
    console.log("in state city");
    $scope.frm.country_city;
    $http.get(url, {
        params: {
            action: 'get_state_city',
            country_id: $scope.frm.country_city
        }
    }).success(function(data, status, headers, config, jsonp) {
        $scope.state_city= data;
        console.log($scope.state_city);
    });
};

问题是，当我第二次更改第一个下拉框的响应时，它给我一个错误。这些图像是有帮助的。第三张图显示错误

图像显示选择印度国家和马哈拉施特拉邦作为响应，但选择美国只是为了更改响应时出现错误

Answer 1

问题是你的 scope function name 和 scope variable name 是一样的:

$scope.state_city = function() {
    console.log("in state city");
    $scope.frm.country_city;
    $http.get(url, {
        params: {
            action: 'get_state_city',
            country_id: $scope.frm.country_city
        }
    }).success(function(data, status, headers, config, jsonp) {
        $scope.state_city= data; => Issue is here
        console.log($scope.state_city);
    });
};

您正在创建一个函数 $scope.state_city()，然后在您的成功函数中执行此操作 $scope.state_city= data;，从下一次开始你的 state_city 变成了一个带有 response data 的 variable 而不再是一个 function。