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>

由于产品是设定值，因此只要选择了一个值就会触发loadProduct，因为将设置ng-model

AngularJS - ng-change not firing

3 个答案: