AngularJs：我有一个选择下拉列表，它在更改时只调用一次函数。我怎样才能让它在更改时调用该函数？答案

【问题标题】：AngularJs: I have the select droplist that calls a function only once when changed. How can I make it call the function whenever it is changed?AngularJs：我有一个选择下拉列表，它在更改时只调用一次函数。我怎样才能让它在更改时调用该函数？
【发布时间】：2017-10-22 03:08:02
【问题描述】：

我有一个选择下拉列表选项，该选项填充了我的数据库中的国家，我希望成功选择一个国家/或更改以调用一个函数，该函数通过ng-change 指令根据所选国家/地区检索区域。到目前为止，可以在选择下拉列表选项控件中检索和填充国家/地区。 现在： 我似乎不明白的是，我的指令只执行一次并根据所选选项返回区域，但如果我重复或更改国家/地区而不刷新浏览器，我会得到 TypeError : v2.MyregionFunction 不是函数。 MyregionFUnction 引用了我为检索区域而调用的方法，其名称为 nationalRegions。下面是实际代码：

在 index.html 中

<!DOCTYPE html>
<html ng-app="options" lang='en'>

<head>
<title>Select Countries App:</title>
<script src="appModule.js"></script>
<script src="app.js"></script>
</head>

<body ng-controller="ctlOptions">

<label>Country:</label>
<select ng-model="userDomain" ng-options="location.otherName for location in userCountries"  ng-change="nationalRegions(userDomain.idCountry)">
</select>

<label>Region:</label>
<select ng-model="regionDomain" ng-options="region.regionName for region in nationalRegions">

</body>
</html>

现在在 appModule.js 中

var app=angular.module("options",[]);
app.factory('miscellaneous',function(){


return{

    uiRequest:function(scope,inputString,callBack){

        $.ajax({
        type: "POST",
        url:"appBackend.php",
        data: {inputString:inputString},
        dataType: "json",
        success : function(jsonResponce){


                if(callBack && typeof (  callBack )== "function") 
                {  
                    callBack(jsonResponce);
                    scope.$apply();
                }

            },

        error:function(XMLHttpRequest, textStatus, errorThrown){

                scope.colorCode="danger";
                scope.Error="Sorry, there seems to be some problem in your request. Please crosscheck provided informations.";
                scope.$apply();

            }
        })
    },


    fetchCountries:function(scope){

        var inputs={Controller:"service",Action:"userCountries"};
        var inputString = JSON.stringify(inputs);

        this.uiRootRequest(scope,inputString,function(responced){

            scope.userCountries= responced;
            scope.userDomain=scope.userCountries[0]

        });

        return scope.userDomain;
    },


    fetchRegions:function(scope,idCountry){

        var inputs={idCountry:idCountry,Controller:"service",Action:"nationalRegions"};
        var inputString = JSON.stringify(inputs);

        this.uiRootRequest(scope,inputString,function(responced){

            scope.nationalRegions= responced;
            scope.regionDomain=scope.nationalRegions[0];
        });

        return scope.regionDomain;
    }


}

});

最后是 app.js

app.controller('ctlOptions',['$scope','miscellaneous',function ctlOptions($scope,miscellaneous){

$scope.userCountries=miscellaneous.fetchCountries($scope);

$scope.nationalRegions=function(idCountry){

        miscellaneous.fetchRegions($scope,idCountry);
    }

}]);

如果我犯了错误，我可以得到帮助，因为正如我所说，代码只能正常运行一次，当我重新选择另一个国家时会出现问题，很抱歉我没有包含 appBackend.php 文件没有问题，我希望它不会影响调试，如果似乎有什么问题，请让我知道，因为它是我在这里的第一篇文章，我可能有很多代码错字，但它是我的本地机器写得很完美，没有计算手头的问题。

【问题讨论】：

您能否为您的问题添加一个有效的 sn-p。它会给出非常清晰的想法。
@Prateek Gupta 感谢您的回复，您的意思是像小提琴一样吗？...
是的，小提琴会更好。
@Prateek Gupta 我试图为这个演示准备 plunk here 我似乎无法在那里运行它，但它在本地工作，所以如果你在本地机器上获取文件，你会理解的概念我在控制台中遇到的错误。

标签： javascript angularjs

【解决方案1】：

在我的代码中有一个甚至难以追踪的解决方案，因为我会说它是完美的 :) 除了 angularjs 也不会告诉你的一个小例外。 Aaron Gray

回答了它的here

【讨论】：