AngularJS-不觸發ng-change

Question

我在表單的select元素中設置ng-change指令，但是更改值時不會調用鏈接到該指令的函數。 我一直在閱讀非常相似的問題，並應用所看到的答案，但到目前為止，還沒有任何問題。

你能看出我做錯了嗎？

我的HTML：

<div class="row" ng-app="quoteApp">

    <div class="col-lg-12" ng-controller="QuoteController" ng-init="initialize()">
        <h1 class="page-header">Quote</h1>

                <div class="form-group">
                    <label>Carrier</label>
                    <select class="form-control" ng-model="form_carrier_id" ng-change="loadProducts()">
                        <option ng-repeat="carrier in carriers" value="{{carrier.id}}">{[{carrier.name}]}</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Product</label>
                    <select class="form-control" ng-model="form_product_id">
                        <option value=""></option>
                        <option ng-repeat="product in products" value="{{product.id}}">{[{product.name}]}</option>
                    </select>
                </div>

    </div>

</div>

而我的控制器：

angular.module('quoteApp', ['angular-loading-bar']).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
})
    .controller('QuoteController', function ($scope, $http) {

        $scope.carriers = [];
        $scope.products = [];
        $scope.form_carrier_id = '';
        $scope.form_product_id = '';

        $scope.getUrl = function(action){return '/admin/application/quote/json?action='+ action;}

        $scope.initialize = function(){

            // Get the list of carriers
            $http.get($scope.getUrl('getCarriers'))
                .success(function (data) {
                    $scope.carriers = data;
                })
                .error(function () {
                    alert('Error loading carriers');
                });
        }

        $scope.loadProducts = function(){
            alert('HERE');
        }
    });

對我來說，一切看起來都不錯。 可以看到我所缺少的嗎？ 第一個選擇正常加載，問題是當我更改其值時，不會觸發loadProducts函數。

謝謝

Answer 1

我發現了問題所在。 這就是我填補選擇的方式。 它必須這樣填充：

            <select class="form-control" ng-model="form_carrier_id"
                    ng-options='carrier.id as carrier.name for carrier in carriers'
                    ng-change="loadProducts()">
            </select>

Answer 2

這本身可能不是問題，但是您應該始終使用ng-options而不是<option ng-repeat>我在過去已經看到過一些奇怪的行為，因為

Answer 3

嘗試使用ng-options在select元素中重復產品。 您可以如下使用ng-options：

<select class="form-control" ng-model="form_product_id"
                ng-options="product.id as product.name for product in products" ng-change="loadProducts()">
                    <option value="">Select color</option>
                </select>

不是因為產品是設置值，所以只要選擇一個值作為ng-model，就會觸發loadProduct