从下拉菜单中选择选项时触发角度功能

Question

I am populating a select dropdown menu by making a call to an api. 我正在通过调用api来填充选择下拉菜单。 When the user chooses an option from the select menu I wish to fire the second function - $scope.getRoles() . 当用户从选择菜单中选择一个选项时，我希望触发第二个功能- $scope.getRoles() 。 However, this is firing immediately. 但是，这立即被触发。 Any ideas why this is happening? 任何想法为什么会这样？ Please see my attempted code below. 请在下面查看我的尝试代码。

html html

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

angular 角度的

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'
        })
    }
}
}]);

Answer 1

First you should use ngOptions . 首先，您应该使用ngOptions 。

Change this : 改变这个：

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

for: 对于：

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

Example: 例：

 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>

Answer 2

so I think you were looking for this 所以我想你在找这个

(ngModelChange)="getRoles()"

in your HTML tag. 在您的HTML标记中。

this will fire when you change the module it works for most input field I came across here because it doesn't work with mat-select. 这将在您更改模块时触发，它适用于我在这里遇到的大多数输入字段，因为它不适用于mat-select。

this is for angular 7. this is also an old question. 这是针对角度7的。这也是一个古老的问题。

comment: 评论：

but I hope this will help you because this is still not answered if the previous answer works accept it. 但我希望这会对您有所帮助，因为如果先前的答案仍然可以接受，那么仍然无法解决。

从下拉菜单中选择选项时触发角度功能

问题描述

2 个解决方案

解决方案1
0 2016-07-11 16:22:29

解决方案2
0 2019-04-04 12:46:35

从下拉菜单中选择选项时触发角度功能

问题描述

2 个解决方案

解决方案1 0 2016-07-11 16:22:29

解决方案2 0 2019-04-04 12:46:35

解决方案1
0 2016-07-11 16:22:29

解决方案2
0 2019-04-04 12:46:35