CODEWITHSUNDEEP
javascriptangularjsradio-group
George Smith
George Smith

Reputation: 143

Angular - Ng-change return always the same value

I would like to ask, how can i get selected value from radio list?

I tried ng-change, and watch scope, but i get always only first value which is set into the model during the app initi.

Here is example of my code:

Radio button group:

<div class="list" ng-contoller="SettingsCtrl">
        <ion-radio ng-model="choice" ng-value="'dials'">Dials</ion-radio>
        <ion-radio ng-model="choice" ng-value="'conversations'">Conversations</ion-radio>
        <ion-radio ng-model="choice" ng-value="'appoitnments'">Appointments</ion-radio>
        <ion-radio ng-model="choice" ng-value="'orders'">Orders</ion-radio>
      </div>

JS:

// Default choice scope
$scope.choice;

$scope.$watch('choice', function(value) {
            // Here i get always the same value
            console.log("Selected goalType, text: " +value);
});

How can i get selected value and set this value into the scope?

Thanks for any help.

Upvotes: 0

Views: 1694

Answers (2)

chatpitau
chatpitau

Reputation: 1303

Without using ionic framework and with input radio buttons, it is working. You've just make a mistake on this line <div class="list" ng-contoller="SettingsCtrl">. You've forgotten an r in controller.

Here is the code working : HTML

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="[email protected]" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body >
    <div class="list" ng-controller="SettingsCtrl">
        <input type="radio" ng-model="choice" ng-value="'dials'">Dials
        <input type="radio" ng-model="choice" ng-value="'conversations'">Conversations
        <input type="radio" ng-model="choice" ng-value="'appoitnments'">Appointments
        <input type="radio" ng-model="choice" ng-value="'orders'">Orders
      </div>
  </body>

</html>

And JavaScript :

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

app.controller('SettingsCtrl', function($scope){
  $scope.choice;
  console.log('ctrl');
  $scope.$watch('choice', function(value) {
              // Here i get always the same value
              console.log("Selected goalType, text: " +value);
  });
});

You can see it working here : http://plnkr.co/edit/TRJKW7eOlBek6TditM1B?p=preview

EDIT I've tested it with ionic framework. It is also working. So it was just the r the issue.

Upvotes: 1

Cosmin
Cosmin

Reputation: 2214

I've made this fiddle for you. When you select a radio, $scope.currentSelection changes and this way you'll know which is the current selected goal.

Upvotes: 0

Related Questions