CODEWITHSUNDEEP
angularjs
sukesh
sukesh

Reputation: 2423

Dropdown Option is not selected - angularjs

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       
}

Upvotes: 0

Views: 1299

Answers (3)

Tomislav
Tomislav

Reputation: 3211

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

Upvotes: 2

Amay Kulkarni
Amay Kulkarni

Reputation: 838

<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>

Upvotes: 0

bm1729
bm1729

Reputation: 2375

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/

Upvotes: 1

Related Questions