Dropdown Option is not selected - angularjs

Question

I am binding numbers to a dropdown.

When page loads, the default number selected is 3. It should be 1.

Also, when I select other options like 2 & 1 in the dropdown, there are not selected. It just remains 3. Why is this happening.

Issue: The problem is with the ng-class. If I remove the ng-class expression for Next, it works fine. But I want the Next & Last to be disabled, when user selects the last page.

I guess, $scope.LastPageNumber is assigned in a promise and hence the value doesnt stay. That's the reason for the bug.Isn't it. But then how to fix this.

HTML:

<ul class="pagination custom-pagination">
    <li ng-class="{disabled: SelectedPage<=1}"><a href="#">First</a></li>
    <li ng-class="{disabled: SelectedPage<=1}"><a href="#">Prev</a></li>        
    <li>
        <select ng-model="SelectedPage" ng-options="Number for Number in PageNumbers">                
        </select>
    </li>             
    <li ng-class="{disabled: SelectedPage=LastPageNumber}"><a href="#">Next</a></li>
    <li><a href="#">Last</a></li>
</ul>

JS:

$scope.SelectedPage;
$scope.LastPageNumber;
$scope.PageNumbers = [];
$scope.UserReport = [];

GetReport();
console.log($scope.SelectedPage); //print undefined
console.log($scope.LastPageNumber); //print undefined
function GetReport() {
        var promise = Factory.GetReport();
        promise.then(function (success) {
            if (success.data != null && success.data != '') {
                $scope.UserReport = JSON.parse(success.data);
                BindPageNumbers(9);                    
            }
            else {
                $scope.UserResponsesReport = [];
            }
        },
        function (error) {
            console.log(error);
        });
    }

function BindPageNumbers(totalRows) {
    $scope.LastPageNumber = Math.ceil((totalRows / 3));
    for (var i = 1; i <= $scope.LastPageNumber ; i++) {
        $scope.PageNumbers.push(i);
    }
    $scope.SelectedPage = $scope.PageNumbers[0]; //set default page number as 1 
    console.log($scope.PageNumbers[0]); //prints 1       
}

Could you give us a fiddle or plunker to look at please?

Andy Lewis
– Andy Lewis

2015-07-03 08:19:36 +00:00
Commented Jul 3, 2015 at 8:19 — Andy Lewis
– Andy Lewis, Commented Jul 3, 2015 at 8:19

Tomislav · Accepted Answer · 2015-07-03 12:10:47Z

2

You can do it like this:

    var app = angular.module('App',[]);

app.controller("ctrl",function($scope){

    $scope.SelectedPage;
    $scope.LastPageNumber;
    $scope.PageNumbers = [];

    BindPageNumbers(9);

    function BindPageNumbers(totalRows) {
        $scope.LastPageNumber = Math.ceil((totalRows / 3));
        for (var i = 1; i <= $scope.LastPageNumber ; i++) {
            $scope.PageNumbers.push(i);
        }
       $scope.SelectedPage = $scope.PageNumbers[0]; //set default page number as 1        
    }

});

And in HTML:

<body ng-app="App" ng-controller="ctrl">
<select ng-model="SelectedPage" ng-options="number for number in PageNumbers"></select>

Here is the plunker

edited Jul 3, 2015 at 12:10

answered Jul 3, 2015 at 8:33

Tomislav

3,21120 silver badges22 bronze badges

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

Comments

bm1729 · Accepted Answer · 2015-07-03 08:30:33Z

1

You should use the ng-options directive:

HTML:

<div ng-app="app">
    <div ng-controller="mainController">
        <select ng-model="SelectedPage" ng-options="PageNumber for PageNumber in PageNumbers">
        </select>
        {{SelectedPage}}
    </div>
</div>

JS:

angular.module('app', [])
.controller('mainController', function($scope) {
    $scope.PageNumbers = [1, 2, 3];
    $scope.SelectedPage = $scope.PageNumbers[0];
});

Working fiddle here: http://jsfiddle.net/ben1729/daL8r5b9/1/

answered Jul 3, 2015 at 8:30

bm1729

2,3753 gold badges23 silver badges33 bronze badges

2 Comments

sukesh Over a year ago

I have used ng-options. The default selection is still 3. What could be messing with this

sukesh Over a year ago

The BindPageNumbers is being called in a promise. Could that be a reason. Updated my question. Please have a look

Amay Kulkarni · Accepted Answer · 2015-07-03 08:47:45Z

0

<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selected" ng-options="number for number in PageNumbers">
<option>{{number}}</option>            
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

$scope.PageNumbers = [1,2,3];
$scope.selected=$scope.PageNumbers[0];
});
</script>
</body>

answered Jul 3, 2015 at 8:47

Amay Kulkarni

84814 silver badges16 bronze badges

Collectives™ on Stack Overflow

Dropdown Option is not selected - angularjs

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related