CODEWITHSUNDEEP
angularjsionic-framework
Tjodalv
Tjodalv

Reputation: 370

Scope variables are not changing when dropdown change value

I am facing some strange issues regarding angular or ionic (or something else, I am not quite sure).

This is problem. I have 2 dropdown and I want to execute some code when either or the two change value. So I've put ng-change on each dropdown menu. But when that function are triggered I cannot read value of dropdown from within the function. The value always stays in initial state. But when I run the same code only in angular (without ionic) then that works fine. Funny thing is that in my view I see that variables has changed its values, but in function I cannot see that change. Please enlighten me ...

This are examples:

Ionic + Angular example that doesn't work:

Here is the HTML:

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>I will lost my mine soon</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

    <script id="templates/home.html" type="text/ng-template">
      <ion-view view-title="Home">
        <ion-content class="padding">
          <p>First dropdown value: {{first}}</p>
          <p>Second dropdown value: {{second}}</p>
          <select ng-model="first" ng-options="item for item in items" ng-change="onFirstChange()"></select>

                    <select ng-model="second" ng-options="item for item in items" ng-change="onSecondChange()"></select>
        </ion-content>
      </ion-view>
    </script>

  </body>
</html>

Here is the JS:

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'templates/home.html',
      controller: 'HomeTabCtrl'
    });
   $urlRouterProvider.otherwise('/home');
})

.controller('HomeTabCtrl', ['$scope', function(scope) {
  // Set some items
  scope.items = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];

  // Define preselected value for first and second select dropdow
  scope.first = 'First';
  scope.second = 'Second';

  // When first dropdown change value read variables
  scope.onFirstChange = function() {
    console.log('Selected first value', scope.first);
    console.log('Selected second value', scope.second);
  };

  // When second dropdown change value read variables
  scope.onSecondChange = function() {
    console.log('Selected second value', scope.second);
    console.log('Selected first value', scope.first);
  };
}]);

Here is the running example: http://codepen.io/anon/pen/JYeemO?editors=101

This is example without Ionic that works fine:

HTML:

<div ng-app="TestModule">
<div ng-controller="Test">
  <p>First dropdown value: {{first}}</p>
  <p>Second dropdown value: {{second}}</p>
  <select ng-model="first" ng-options="item for item in items" ng-change="onFirstChange()"></select>

  <select ng-model="second" ng-options="item for item in items" ng-change="onSecondChange()"></select>
</div>
</div>

JS:

angular.module('TestModule', [])
.controller('Test', ['$scope', function(scope) {

  scope.items = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];

  scope.first = 'First';
  scope.second = 'Second';

  scope.onFirstChange = function() {
    console.log('Selected first value', scope.first);
    console.log('Selected second value', scope.second);
  };

  scope.onSecondChange = function() {
    console.log('Selected second value', scope.second);
    console.log('Selected first value', scope.first);
  };
}]);

Running example: http://codepen.io/anon/pen/jbQeQQ?editors=101

Upvotes: 1

Views: 1731

Answers (1)

Petr Averyanov
Petr Averyanov

Reputation: 9476

I think it is common dot-issue: if you have childScope that nests parentScope -- you can not modify scope.value in childScope (if scope.value was inited in parentScope), you can modify scope.value.x, scope.value.y. (If u modify scope.value - value will be different in child and in parent scopes)

So just put scope.X.first, scope.X.second instead of scope.first, scope.second and it works: http://codepen.io/anon/pen/QjJzmp?editors=101

Upvotes: 2

Related Questions