Trigger change programmatically : AngularJS

Question

I have this piece of code

<select id="headers" ng-model="importHeader.systemHeaders">
<option ng-repeat="requiredHeaders in vCtrl.wizard.costs.headerData.headers" value="{{requiredHeaders}}"  ng-selected="vCtrl.wizard.costs.changed(importHeader.headerName,requiredHeaders.displayName)">{{requiredHeaders.displayName}}
</option>
</select>

All i'm doing is looping through a set of headers and checks if the value of the imported Header is the same on what if required and it automatically selects it. It works fine, But my problem is that it won't add the systemHeaders in my importHeaders object declared on the ng-model

I need a way to trigger the change event of this select. I know that when changing the seletion programmatically it won't trigger the ngChange event.

i tried creating a function:

changed: function(val1,val2){
        if (val1 == val2){
            angular.element('#headers').change();
                return true;
        } else {
            return false;
        }

}

but it gets me an $apply is already in progress error.

Thanks in advance.

`angular.element('#headers').change();` threw the $apply is already in progres error. — Yaje, Feb 03 '17 at 06:16

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

Check this condition before change the header line

if($scope.$$phase)
{
angular.element('#headers').change();
}

And read this discussions : What is $$phase in AngularJS?

edited May 23 '17 at 12:08

Community

1
1

answered Feb 03 '17 at 06:18

Ramesh Rajendran

37,412
45
153
234

gives me a never ending error on console which mainly says `digest already in progress` – Yaje Feb 03 '17 at 06:23
oops. Just remove the line `$scope.$apply(); ` – Ramesh Rajendran Feb 03 '17 at 06:24

Trigger change programmatically : AngularJS

1 Answers1