Question

我想获得单选按钮的值。所以我写了一个点击事件，在点击中我传递了值。因此，每当用户点击任何单选按钮时，仅设置最新单击的单选按钮值。有没有更好的方法呢？就像检查选中哪个单选按钮一样，并显示相应的值。

JS

;(function() {
    'use strict';

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

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

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

        function getstatus(obj){
            vm.status = 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="tremorController.getstatus('NUM_ERRORS')">NUM_ERRORS<br>
            <input type="radio" name="data" value="NUM_UB_OCCURRENCES" ng-model="processState.widgetInstance.configuration.data.NUM_UB_OCCURRENCES" ng-click="tremorController.getstatus('NUM_UB_OCCURRENCES')">NUM_UB_OCCURRENCES<br>
            <input type="radio" name="data" value="NUM_T_OCCURRENCES" ng-model="processState.widgetInstance.configuration.data.NUM_T_OCCURRENCES" ng-click="tremorController.getstatus('NUM_T_OCCURRENCES')">NUM_T_OCCURRENCES<br>
            <input type="radio" name="data" value="NUM_OCCURRENCES" ng-model="processState.widgetInstance.configuration.data.NUM_OCCURRENCES" ng-click="tremorController.getstatus('NUM_OCCURRENCES')">NUM_OCCURRENCES<br>
            <input type="radio" name="data" value="AVG_RSP_TIME" ng-model="processState.widgetInstance.configuration.data.AVG_RSP_TIME" ng-click="tremorController.getstatus('AVG_RSP_TIME')">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="tremorController.getstatus('UB_AVG_RSP_TIME')">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="tremorController.getstatus('T_AVG_RSP_TIME')">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="tremorController.getstatus('UB_SQR_AVG_RSP_TIME')">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="tremorController.getstatus('T_SQR_AVG_RSP_TIME')">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="tremorController.getstatus('SQR_AVG_RSP_TIME')">SQR_AVG_RSP_TIME<br>


  <br>
  <div>

    The selected Value is :

    {{tremorController.status}}


  </div>
   </div>
  </body>

Working Copy

Answer 1

我在这里编辑了你的傻瓜：http://plnkr.co/edit/VAAqiW3jMmAwAROJTg0G?p=preview

如果将ng-model设置为相同，则所选按钮的值将反映在该模型中：

<强> HTML

   <div ng-controller="TremorController as tremorController">
            <input type="radio" name="data" value="NUM_ERRORS" ng-model="radioButtons">NUM_ERRORS<br>
            <input type="radio" name="data" value="NUM_UB_OCCURRENCES" ng-model="radioButtons">NUM_UB_OCCURRENCES<br>
            <input type="radio" name="data" value="NUM_T_OCCURRENCES" ng-model="radioButtons">NUM_T_OCCURRENCES<br>
            <input type="radio" name="data" value="NUM_OCCURRENCES" ng-model="radioButtons">NUM_OCCURRENCES<br>
            <input type="radio" name="data" value="AVG_RSP_TIME" ng-model="radioButtons">AVG_RSP_TIME<br>
            <input type="radio" name="data" value="UB_AVG_RSP_TIME" ng-model="radioButtons">UB_AVG_RSP_TIME<br>
            <input type="radio" name="data" value="T_AVG_RSP_TIME" ng-model="radioButtons">T_AVG_RSP_TIME<br>
            <input type="radio" name="data" value="UB_SQR_AVG_RSP_TIME" ng-model="radioButtons">UB_SQR_AVG_RSP_TIME<br>
            <input type="radio" name="data" value="T_SQR_AVG_RSP_TIME" ng-model="radioButtons">T_SQR_AVG_RSP_TIME<br>
            <input type="radio" name="data" value="SQR_AVG_RSP_TIME" ng-model="radioButtons">SQR_AVG_RSP_TIME<br>


  <br>
  <div>

    The selected Value is : {{radioButtons}}

  </div>

Answer 2

你可以编写一个自定义指令来获取控制器中单选按钮的值。

    app.directive('buttonId', function () {
       return {
           restrict: "A",
           link: function (scope, element, attributes) {
               element.bind("click", function () {
                   scope.selectedRadioButton = attributes.buttonId;                
               });
           }
       }
    });

在html中使用指令

<input type="radio" name="gender" value="female" button-id="3" > Female<br>

获得单击事件以外的单选按钮值的更好方法

2 个答案: