AngularJS - ng-change没有触发答案

【问题标题】：AngularJS - ng-change not firingAngularJS - ng-change没有触发
【发布时间】：2016-08-02 20:59:39
【问题描述】：

我在表单的一个选择元素中设置了 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没有被触发。

谢谢

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

这可能不是问题本身，但是您应该始终使用ng-options 而不是<option ng-repeat> 由于这个原因，我过去曾看到过一些奇怪的行为

【讨论】：

【解决方案2】：

我找到了问题所在。这就是我填写选择的方式。它必须像这样填充：

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

【讨论】：

【解决方案3】：

尝试使用 ng-options 在您的选择元素中重复产品。您可以按如下方式使用 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>

不是因为产品是设置值，所以 loadProduct 应该触发，只要选择一个值作为 ng-model 将被设置

【讨论】：