Question

我有一套RadioButton s。用户可以单击其中任何一个。基于RadioButton点击，我需要显示其值。目前我正在使用ng-show来验证点击项目的值。如果为true，则显示<p>内容。否则隐藏它。

我的代码：

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

Answer 1

显示所选值的<div>不在tremorController块内，因此无法访问对象processState，因为它在另一个范围内。

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

Answer 2

我不太确定，您面临的错误是什么，但我尝试使用您提出的技术进行简单的示例，并且我能够很好地获得这些值。

<强>代码：

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

单击时显示单选按钮的值

2 个答案: