Angular : select / ng-option not fired: how to debug?

Question

I have a trouble with a piece of angular code: I have a "ng-select" which works in some environments but not in others !

The model of this code is:

 var imputationApp = angular.module('imputationApp', []).controller('imputationController', function($scope) {
    $scope.currentSL = '';
    $scope.sousLignes = [ 
        { "slidx":"c5!1875354624","desc":"option1 " }, 
        {"slidx":"c9!1875379297","desc":"option 2" }, 
        { "slidx":"c9!1875379392","desc":"option 3" } 
    ];
});

and the HTML:

<div ng-app="imputationApp" ng-controller="imputationController">
 <fieldset> <legend>Imputation :</legend>  
     <select class="liste-candidats-select" ng-model="currentSL" ng-options="item as item.desc for item in  sousLignes"  ></select>
   <br />
<span> aE: {{currentSL.desc}} / {{currentSL.slidx}}  </span> 
</fieldset> 
</div>

It could be tested on fiddle: http://jsfiddle.net/zDvD9/78/

Alone, there is no problem.

But when integrated in more complex pages, sometimes it run, sometime not... So it's impossible for me to give more detail about it.

Could someone give me some idea how to try to debug it ? I never do it with angular, and I don't know if there is a way to catch the events on select's changes...

Thank you for any possible solution. Didier

You might want to check the browser console to see whether there is any error when it is not working. Or can you describe how it is not working: no options on the list? `ng-model` doesn't update on change? — Icycool, Oct 13 '15 at 08:07
Hi Icycool, unfortunately, there is no message in the console... and the spans below the select field are not updated when it doesn't run. I will try again to put a 'ng-change' function... — Didier68, Oct 13 '15 at 09:00
In normal cases ng-change won't be needed for data binding. Is your selections or model coming asynchronusly? — Icycool, Oct 13 '15 at 12:42
The data are loaded at the page creation (my code is incorparated in a page generated by a CRM application, like an "*.ASP" page !) I try a other way : {{currentSL2}}
But it'sn't better... — Didier68, Oct 13 '15 at 13:25
This problem makes me crazy ! Now, sometimes, it runs well, sometime (just after a F5,...) it doesn't run anymore (with the same data...). — Didier68, Oct 13 '15 at 14:52
Ok let's try something. Can you initialize your variable `$scope.data = {currentSL: {}};` and then `ng-model="data.currentSL"`? — Icycool, Oct 13 '15 at 15:26

score 0 · Answer 1 · answered Oct 13 '15 at 08:19

0

There's a directive called ng-change. You could use it and set a breakpoint in the called function.

answered Oct 13 '15 at 08:19

Ben Kauer

586
3
11

Hi, i added this function in my controller: $scope.onSelectChange = function(){ alert(' ngChange fired !!! '); return; } and also in the select: ng-change="onSelectChange()" ( can be tested on http://jsfiddle.net/zDvD9/82/ ) but this function doesn't fired in my HTML page... – Didier68 Oct 13 '15 at 09:16

Didier68 · Accepted Answer · 2015-10-14T15:55:58.780

I'm not 100% sure, but I think my concern is not related directly to Angular, but it is rather a problem of integration of an Angular "code" in another application that uses jQuery, ...

The "ng-select" component is the only "Angular" problem I have in this page.

After 3 days of headache, I found (hope !) a workaround, which need some work :

In my controller, I added a global var:

var AngularMainScope = null;
var imputationApp = angular.module('imputationApp', []).controller('imputationController', function($scope) {
        ...
        AngularMainScope = $scope;

$scope.onSelectChangeSousLigne = function(sel){

    alert(' onSelectChangeSousLigne fired !!! ' + sel.value);  

    var wsl = $scope.data.idx_sousLignes[sel.value];
    $scope.data.currentSL = wsl;
    // do some stuffs..
    ...
    // Tell to Angular...
    if (!$scope.$$phase) {
        $scope.$apply();  // MAGIC !
    }
    return;
}

And in the HTML code...

<select ng-model="data.cur_slidx" onchange="AngularMainScope.onSelectChangeSousLigne(this)"   >
    <option  ng-repeat="item in data.sousLignes" value="{{item.slidx}}">{{item.desc}}</option>
</select>

I still have to check if I can properly retrieve the current value. I'm already happy to have an event for each change of the value!

Just before to close my question, I update my solution given above.. Thank to Icycool and realkyton for your help ! — Didier68, Oct 14 '15 at 15:59

Angular : select / ng-option not fired: how to debug?

2 Answers2