AngularJS - ng-change not firing

我在我的窗体的select元素中设置了ng-change指令，但是当我更改该值时，不会调用链接到它的函数。我一直在阅读非常类似的问题，并应用我看到的答案，至今还没有任何工作。AngularJS - ng-change not firing

你能看到wjat我做错了吗？

我的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未被触发。

谢谢

来源

2016-08-02 André Luiz

这可能不是问题本身，但是你应该总是使用ng-options而不是<option ng-repeat> 我已经看到了过去的一些怪异的行为归因于

来源

2016-08-02 21:08:00

我发现问题所在。这是我填补选择的方式。它需要填补这样的：

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

来源

2016-08-02 21:04:55

尝试使用ng-options来重复选择元素中的产品。可以使用NG-选项如下：

不是产品设定值时，loadProduct应该触发，只要选择一个值作为NG-模型将被设置

来源

2016-08-02 21:16:56 ntrajan

这里是一个工作小提琴http://jsfiddle.net/U3pVM/26533/ – ntrajan

AngularJS - ng-change not firing

回答

相关问题