My select option changes to null in AngularJS

Question

I don't know how to change this, but whenever I use my select option, it always goes to null.

This is my HTML code,

<select type="number" class="footer" id="chooser" 
        ng-change="selectchange(selectedPage)" 
        ng-model="selectedPage" min="1"
        ng-options="x for x in pages">
    <option value="" selected="false" hidden>
</select>

Is there any reason it changes to null. Because when it changes it sends another request to angular.

What is the problem here, and how to solve it?

@Sajeetharan I have 2-3 options in my select. So when I select one, say the second option, it takes that value and then automatically goes to a null value that I did not even put in the options. This results in my code getting another request as the value in the select options has been changed for a second time. I read somewhere that angular puts a null option in select but I didn't understand how to counter it. — coder123
– coder123, Commented Apr 29, 2018 at 18:11
edit your question with your js code you probably missing something there — Panos K
– Panos K, Commented Apr 30, 2018 at 6:14
Share your js code including selectchange and console.log statements. — Łukasz
– Łukasz, Commented Apr 30, 2018 at 6:29

Saeed · Accepted Answer · 2018-04-30 07:09:20Z

1

Use this in html

<select class="footer" id="chooser" ng-change ="selectchange()" ng-model="selectedPage" ng-options="x in pages"></select>

And in your controller:

$scope.selectedPage = "1";
$scope.pages = [1, 2, 3, 4];
$scope.selectchange = function() {
  console.log("selectedPage changed to : ", $scope.selectedPage);
}

For more information read https://docs.angularjs.org/api/ng/directive/select

answered Apr 30, 2018 at 7:09

Saeed

5,4983 gold badges30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sahil0021 · Accepted Answer · 2018-05-01 17:26:38Z

0

You have set the option value to null and it always selected by selected tag. So it select null value every time, remove that option value and use ng-options to set the options in your selected box. No need to use option tag.

<select type="number" class="footer" id="chooser" 
    ng-change="selectchange(selectedPage)" 
    ng-model="selectedPage" min="1"
    ng-options="x for x in pages">
<-- <option value="" selected="false" hidden> -->   // remove this line
</select>

answered May 1, 2018 at 17:26

sahil0021

771 silver badge7 bronze badges

Collectives™ on Stack Overflow

My select option changes to null in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related