отображение значения переключателя при нажатии

У меня есть набор RadioButton s. Пользователь может щелкнуть по любому из них. На основании щелчка RadioButton мне нужно отобразить его значение. В настоящее время я использую ng-show для проверки значения щелкнутого элемента. Если это правда, то отобразите содержимое <p>. В противном случае скрыть его.отображение значения переключателя при нажатии

Мой код:

;(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

источник

2016-06-03 krishna_v

В чем вопрос? – Michael

всякий раз, когда я нажимаю на переключатель, мне нужно отобразить его значение. –

<div>, где у ou показывают, что выбранные значения не находятся внутри блока tremorController, и поэтому объект processState не может быть доступен, так как он находится в другой области.

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

источник

2016-06-03 10:11:48 Michael

Я добавил ссылку plunker –

Отлично !!! Мой плохой .... Майкл, можем ли мы использовать ng- если здесь, я попытался, но не работал. Я бы хотел, чтобы выбранный элемент отображался в том же вертикальном положении. –

Я не уверен, что, какие ошибки вы столкнулись, но я попытался простой образец, используя технику, которую вы попросили, и я был в состоянии получить значения достаточно хорошо.

Код:

<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 -->

Обратитесь к демо here.

источник

2016-06-03 10:32:18 Shashank

Майкл дал мне решение, я закрывал div, где дана ссылка на контроллер. –

Да, никаких проблем, как часть лучшей практики, ссылка 'controller' должна быть добавляется либо в тег 'html', либо' body'. – Shashank

отображение значения переключателя при нажатии

ответ

Смежные вопросы