javascript - ng-change does not work with ng-repeat with options but works with ng-options - Stack Overflow

admin管理员组

文章数量:1434949

I have created select options with ng-repeat, but the function set with on-change is never called.

<select>
<option ng-model="level1Selected" ng-repeat="item1 in level1" ng-change="setLevel2()" value="{{item1}}">{{item1}}</option>

I recreated the same thing with ng-options, and the function gets called:

<select ng-options="item1 for item1 in level1" ng-model="level1Selected" ng-change="setLevel2()"></select>

I have checked the documentation, and I see no reason for this difference. The variable level1 is an array of strings, so I don't understand why they behave differently.

The function is currently just a placeholder with console.log:

$scope.setLevel2 = function() {
    console.log("value: ");
}

I have created select options with ng-repeat, but the function set with on-change is never called.

<select>
<option ng-model="level1Selected" ng-repeat="item1 in level1" ng-change="setLevel2()" value="{{item1}}">{{item1}}</option>

I recreated the same thing with ng-options, and the function gets called:

<select ng-options="item1 for item1 in level1" ng-model="level1Selected" ng-change="setLevel2()"></select>

I have checked the documentation, and I see no reason for this difference. The variable level1 is an array of strings, so I don't understand why they behave differently.

The function is currently just a placeholder with console.log:

$scope.setLevel2 = function() {
    console.log("value: ");
}

• javascript
• angularjs
• angularjs-ng-repeat
• ng-options

Share Improve this question Follow asked Nov 23, 2016 at 15:03 balaganbalagan 14611 silver badge55 bronze badges 2

• 1 put ng-change on the select element not option since it is select's value that changes – mic4ael Commented Nov 23, 2016 at 15:06
• 1 ng-change would work on select/input, it isn't intended(never) work on option tag – Pankaj Parkar Commented Nov 23, 2016 at 15:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

If you want to do that you need to put ng-model and ng-change in select tag, try this:

<select ng-model="level1Selected" ng-change="setLevel2()">
    <option ng-repeat="item1 in level1"  value="{{item1}}">{{item1}}</option>
</select>

You need trigger ng-change directive to select element.

The ng-change event is triggered at every change in the value.

Here is a working solution: jsfiddle

 <select ng-model="level1Selected"  ng-change="setLevel2()">
    <option  value="{{item1}}">{{item1}}</option>
 </select>

JS

$scope.setLevel2 = function() {
   alert();
}

本文标签： javascriptngchange does not work with ngrepeat with options but works with ngoptionsStack Overflow