0

我通过调用 api 来填充选择下拉菜单。当用户从选择菜单中选择一个选项时，我希望触发第二个功能 - $scope.getRoles(). 然而，这是立即开火。任何想法为什么会发生这种情况？请在下面查看我尝试的代码。

html

<select>
     <option ng-change="getRoles()" ng-repeat="country in countries">{{ country.countryCode }}</option>   
</select>

有角度的

app.controller("jobsCtrl", function($scope, careerData) {

    //get list of countries when app loads
    careerData.countryList().then(function successCallback(response) {
            $scope.countries = response.data;   
            $scope.countries.unshift({countryCode: "Select a country"}); 
        }, function errorCallback(response) {  
            console.log(response);
    });

    $scope.getRoles = careerData.jobByCountry().then(function successCallback(response) {
            console.log(response)
        }, function errorCallback(response) {  
            console.log(response);
    })
});

app.factory('careerData', ['$http', function($http){
return {

     countryList: function() {
        return $http({
            method: 'GET',
            url: 'testUrl'
        })
    },

    jobByCountry: function() {
        return $http({
            method: 'GET',
            url: 'someurl'
        })
    }
}
}]);
4

2 回答 2

0

所以我想你在找这个

(ngModelChange)="getRoles()"

在您的 HTML 标记中。

当您更改适用于我在这里遇到的大多数输入字段的模块时，这将触发，因为它不适用于 mat-select。

这是针对 Angular 7 的。这也是一个老问题。

评论：

但我希望这会对您有所帮助，因为如果先前的答案有效，则仍然无法回答。

于 2019-04-04T12:46:35.080 回答
0

首先你应该使用ngOptions。

改变这个：

<select>
  <option ng-change="getRoles()" ng-repeat="country in countries">{{ country.countryCode }}</option>   
</select>

为了：

<select ng-options="country as country.countryCode for country in countries" ng-model="countrySelected" ng-change="getRoles()">  
</select>

例子：

angular.module('app', [])
  .controller('mainCtrl', function($scope) {
    $scope.cars = ["Audi", "BMW", "Corolla", "Mercedes"];

    $scope.check = function() {
      console.log($scope.car);
    }
  });
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
    Cars:
    <select ng-model="car" ng-options="car for car in cars" ng-change="check()">
       <option value="">Select a car</option>
    </select>
</body>

</html>

于 2016-07-11T16:22:29.850 回答