scope variable not changing - angularjs

Question

The scope variable SelectedPage is not updating. There is a ul li for pagination, that has a dropdown & then a next button. User can go to a page either by clicking the button or choosing an option in select. When I click on Next or select 2 in the dropdown, I'm expecting the value of $scope.SelectedPage to change to 2. But it always remains 1.

HTML:

<ul>     
 <li>
   <select ng-model="SelectedPage" ng-change="ShowPageResult()">
     <option value="1">1</option>
     <option value="2">2</option>
   </select>
 </li>
 <li ng-click="SelectedPage = SelectedPage + 1;ShowPageResult();"><a href=" #">Next</a></li> 
</ul>

Ctrl.js

$scope.ShowPageResult = function () {
       console.log($scope.SelectedPage); //always prints 1        
    }

EDIT http://jsfiddle.net/g8pLhf79/ After the page loads, click on 'Next', the no. increments. Now select a value in the dropdown and click on next. It now appends "1" instead of incrementing. I hope this helps understand the issue.

asiop · Accepted Answer · 2015-07-07 15:27:56Z

1

Here we go (2nd attempt): http://jsfiddle.net/g8pLhf79/11/

I made minimal changes to have the code work in your way, in general Angular is about separating View from Model/Controller so you're encouraged to keep the logic separated from the view. But anyway here it is the way you want it:

<div ng-app="app" ng-controller="ctrl">
<ul>
    <li>
        <select ng-model="SelectedPage" ng-change="ShowPageResult();">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </li>
    <li ng-click="SelectedPage = (SelectedPage * 1+1);ShowPageResult();"><a href=" #">Next</a>

    </li>
    <li>Selected Page : {{SelectedPage}}</li>
</ul>
</div>

Controller:

var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
    $scope.SelectedPage = 1;
    $scope.ShowPageResult = function () {
        console.log($scope.SelectedPage);
    } 
});

edited Jul 7, 2015 at 15:27

answered Jul 7, 2015 at 14:34

asiop

7255 silver badges11 bronze badges

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

1 Comment

sukesh Over a year ago

I would go with your method, but I have other buttons like first, prev & last along with next. So, in order to minimize code, I wanted to increment it in the html itself. This doc says so but not working - docs.angularjs.org/api/ng/directive/ngClick. Please also check my fiddle

ngLover · Accepted Answer · 2015-07-07 13:10:05Z

1

Here is the working example you can refer the plunker.

http://plnkr.co/edit/wOXWXvPZw9AYrqyy486h?p=preview

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.arr = ["0","1"];
  $scope.ShowPageResult = function () {
       alert($scope.SelectedPage); //always prints 1        
    } 
});

plz visit this one according to your requirement. http://plnkr.co/edit/wOXWXvPZw9AYrqyy486h?p=preview

edited Jul 7, 2015 at 13:10

answered Jul 7, 2015 at 12:44

ngLover

4,6183 gold badges23 silver badges42 bronze badges

6 Comments

sukesh Over a year ago

When I select 1 in the dropdown and click on Next, the value in the alert should be 2. And also the value in the dropdown should change to 2. That is what i'm trying to do with my code. In your example, it is not so.

ngLover Over a year ago

you need to do something like this visit on different link.

sukesh Over a year ago

Could you please tell me why this isn't working ng-click="SelectedPage = SelectedPage + 1;

ngLover Over a year ago

Because the model binded on select is a integer and you are incrementing that value on the contrary the value in option tag is string just refer link.. plnkr.co/edit/wOXWXvPZw9AYrqyy486h?p=preview

sukesh Over a year ago

Makes sense. So, how to increment the variable value in html. But, the doc says, it increments instead of append - docs.angularjs.org/api/ng/directive/ngClick

|

Collectives™ on Stack Overflow

scope variable not changing - angularjs

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related