0

API を呼び出して、選択ドロップダウン メニューを設定しています。ユーザーが選択メニューからオプションを選択すると、2番目の機能を起動したいと思います - $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

まず、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 に答える