CODEWITHSUNDEEP
angularjs
krishna_v
krishna_v

Reputation: 1511

display value of radio button when clicked

I have a set of RadioButtons. The user can click on any one of them. Based on the RadioButton clicked I need to display its value. Currently I am using the ng-show to verify the clicked item's value. If it is true then display the <p> contents. Otherwise hide it.

My code :

JS

;(function() {
    'use strict';

    angular
        .module('tramsConsole',[])
        .controller('TremorController', TremorController);

    TremorController.$inject = ['$scope', '$log'];

    function TremorController($scope, $log,tremorService) {
        var vm = this;
        console.log("controller loaded");
        vm.getstatus = getstatus;

        function getstatus(obj){

        }

    }        
})();

HTML

<body ng-app="tramsConsole">
    <div ng-controller="TremorController as tremorController">
            <input type="radio" name="data" value="NUM_ERRORS" ng-model="processState.widgetInstance.configuration.data.NUM_ERRORS" ng-click="getstatus($event)">NUM_ERRORS<br>
            <input type="radio" name="data" value="NUM_UB_OCCURRENCES" ng-model="processState.widgetInstance.configuration.data.NUM_UB_OCCURRENCES" ng-click="getstatus($event)">NUM_UB_OCCURRENCES<br>
            <input type="radio" name="data" value="NUM_T_OCCURRENCES" ng-model="processState.widgetInstance.configuration.data.NUM_T_OCCURRENCES" ng-click="getstatus($event)">NUM_T_OCCURRENCES<br>
            <input type="radio" name="data" value="NUM_OCCURRENCES" ng-model="processState.widgetInstance.configuration.data.NUM_OCCURRENCES" ng-click="getstatus($event)">NUM_OCCURRENCES<br>
            <input type="radio" name="data" value="AVG_RSP_TIME" ng-model="processState.widgetInstance.configuration.data.AVG_RSP_TIME" ng-click="getstatus($event)">AVG_RSP_TIME<br>
            <input type="radio" name="data" value="UB_AVG_RSP_TIME" ng-model="processState.widgetInstance.configuration.data.UB_AVG_RSP_TIME" ng-click="getstatus($event)">UB_AVG_RSP_TIME<br>
            <input type="radio" name="data" value="T_AVG_RSP_TIME" ng-model="processState.widgetInstance.configuration.data.T_AVG_RSP_TIME" ng-click="getstatus($event)">T_AVG_RSP_TIME<br>
            <input type="radio" name="data" value="UB_SQR_AVG_RSP_TIME" ng-model="processState.widgetInstance.configuration.data.UB_SQR_AVG_RSP_TIME" ng-click="getstatus($event)">UB_SQR_AVG_RSP_TIME<br>
            <input type="radio" name="data" value="T_SQR_AVG_RSP_TIME" ng-model="processState.widgetInstance.configuration.data.T_SQR_AVG_RSP_TIME" ng-click="getstatus($event)">T_SQR_AVG_RSP_TIME<br>
            <input type="radio" name="data" value="SQR_AVG_RSP_TIME" ng-model="processState.widgetInstance.configuration.data.SQR_AVG_RSP_TIME" ng-click="getstatus($event)">SQR_AVG_RSP_TIME<br>

  </div>
  <br>
  <div>

    The selected Value is :
    {{processState.widgetInstance.configuration.data.NUM_OCCURRENCES}}

  <p ng-show="processState.widgetInstance.configuration.data.NUM_OCCURRENCES=='NUM_OCCURENCES'"><b><i>{{ processState.widgetInstance.configuration.data.NUM_OCCURRENCES }}</i></b></p><br>
    <p ng-show="processState.widgetInstance.configuration.data.NUM_T_OCCURRENCES=='NUM_T_OCCURRENCES'"><b><i>{{ processState.widgetInstance.configuration.data.NUM_T_OCCURRENCES }}</i></b></p><br>
    <p ng-show="processState.widgetInstance.configuration.data.NUM_UB_OCCURRENCES=='NUM_UB_OCCURRENCES'"><b><i>{{ processState.widgetInstance.configuration.data.NUM_UB_OCCURRENCES }}</i></b><br>
    <p ng-show="processState.widgetInstance.configuration.data.AVG_RSP_TIME=='AVG_RSP_TIME'"><b><i>{{ processState.widgetInstance.configuration.data.AVG_RSP_TIME }}></i></b></p><br>
    <p ng-show="processState.widgetInstance.configuration.data.T_AVG_RSP_TIME=='T_AVG_RSP_TIME'"><b><i>{{ processState.widgetInstance.configuration.data.T_AVG_RSP_TIME }}</i></b></p><br>
    <p ng-show="processState.widgetInstance.configuration.data.UB_AVG_RSP_TIME=='UB_AVG_RSP_TIME'"><b><i>{{ processState.widgetInstance.configuration.data.UB_AVG_RSP_TIME }}</i></b></p><br>
    <p ng-show="processState.widgetInstance.configuration.data.SQR_AVG_RSP_TIME=='SQR_AVG_RSP_TIME'"><b><i>{{ processState.widgetInstance.configuration.data.SQR_AVG_RSP_TIME }}</i></b></p><br>
    <p ng-show="processState.widgetInstance.configuration.data.T_SQR_AVG_RSP_TIME=='T_SQR_AVG_RSP_TIME'"><b><i>{{ processState.widgetInstance.configuration.data.T_SQR_AVG_RSP_TIME }}</i></b></p><br>
    <p ng-show="processState.widgetInstance.configuration.data.UB_SQR_AVG_RSP_TIME=='UB_SQR_AVG_RSP_TIME'"><b><i>{{ processState.widgetInstance.configuration.data.UB_SQR_AVG_RSP_TIME }}</i></b></p><br>
    <p ng-show="processState.widgetInstance.configuration.data.NUM_ERRORS=='NUM_ERRORS'"><b><i>{{ processState.widgetInstance.configuration.data.NUM_ERRORS }}</i></b></p><br>
    <br>

  </div>

  </body>

Working Copy

Upvotes: 0

Views: 52

Answers (2)

Shashank
Shashank

Reputation: 2060

I am not pretty sure, what errors you are facing, but I tried a simple sample using the technique that you have asked, and I was able to get the values quite well.

Code:

<label for="test1">
      <input type="radio" value="test1" ng-model="test1" name="test" /> TEST1
</label>

<!-- other stuff -->

<p ng-show="test1 == 'test1'">
      {{test1}}
</p>

<!-- other stuff -->

Refer to the demo here.

Upvotes: 0

Michael
Michael

Reputation: 3104

The <div> where you show the selected values is not inside the tremorController's block and therefore the object processState cannot be accessed as it is in another scope.

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

Upvotes: 2

Related Questions