AngularJS ng-select issue

Question

I've got a simple page selector I'm using in an Angular 1.5 page. The select works for the most part, but the ng-selected part does not.

If I'm on page 3, (which is ironically the last page, not sure if that matters) 3 is selected by default. If I'm on page 1 or 2, the first item (blank) is selected. I'm not super versed in Javascript, but figured it might be a type issue. Tried settings $scope.thisPage with parseInt(page) and page.toString() just in case it did something under the sheets I wasn't aware of, but it all turned out the same.

app.controller('myCtrl', ['$scope','$route','$routeParams', function($scope,$route,$routeParams) {
    $scope.pages = [];
    var page = $routeParams.p ? $routeParams.p : 1
    $scope.thisPage = page; 
    for (var i = 0; i < 5; i++) {
        $scope.pages.push(i);
    }
}]);

<form name="myForm">
    <select ng-model="selectedPage" ng-change="switchPage(selectedPage)">
    <option ng-repeat="p in pages" ng-value="{{p}}" ng-selected="{{p == thisPage}}">{{p}}</option>
    </select>
</form>

Aravind · Accepted Answer · 2017-04-09 00:10:59Z

1

You need no set selected property

<form name="myForm">
    <select ng-model="selectedPage" ng-change="switchPage(selectedPage)">
    <option ng-repeat="p in pages" ng-value="{{p}}">{{p}}</option>
    </select>
</form>

Instead bind the selectedPage value with thisPage

app.controller('myCtrl', ['$scope','$route','$routeParams', function($scope,$route,$routeParams) {
    $scope.pages = [];
    var page = $routeParams.p ? $routeParams.p : 1
    $scope.selectedPage= page; ////////////////////////////////
    for (var i = 0; i < 5; i++) {
        $scope.pages.push(i);
    }
}]);

answered Apr 9, 2017 at 0:10

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

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

4 Comments

Sorikairo Over a year ago

What if he has a reason to use ng-selected ? However, that's correct too :)

Aravind Over a year ago

why to use ngSelected when you are having two way data binding

Sorikairo Over a year ago

If there is no point on stocking the value and it's only used for display with proper styling ? Who are we to judge :D

kiss-o-matic Over a year ago

Thanks so much -- this worked. I could have sworn I tried this earlier (I tried a few solutions, but most were for fancier models). Anywho, on to the next problem. :)

Sorikairo · Accepted Answer · 2017-04-09 00:09:49Z

1

ngSelected require an expression as following p == thisPage and not {{p == thisPage}}

Source : https://docs.angularjs.org/api/ng/directive/ngSelected

answered Apr 9, 2017 at 0:09

Sorikairo

7984 silver badges19 bronze badges

2 Comments

kiss-o-matic Over a year ago

this gives me the same results. :(

Sorikairo Over a year ago

@kiss-o-matic oh... Could you create a plunker or codepen with your project ? It helps debugging :)

Collectives™ on Stack Overflow

AngularJS ng-select issue

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related