Question

我有3个无线电输入绑定到ctrl.poiType，其中 ctrl 是控制器， poiType 是整数。 ctrl.poiType可以具有由四个常量指定的3个值之一（ctrl.TYPE_TRIP，ctrl.TYPE_EVENT，ctrl.TYPE_POI）。

所以我创建了三个输入无线电，使用ng-model和ng-value，如下所示：

<label class="btn btn-default">
    <input type="radio" autocomplete="off" 
           ng-value="ctrl.TYPE_TRIP"
           ng-model="ctrl.poiType"  
           ng-change="ctrl.alert()"/>itinerari
</label>

如果ng-model的值等于ng-value，则应检查广播，但它不起作用。我不知道为什么。

[UPDATE] 这是示例

的正确JS Fiddle

Answer 1

我假设您要解决的问题是单击时所选按钮显示为活动状态。由于您在不使用Bootstrap javascript组件的情况下使用Bootstrap样式，因此您需要在Angular中自行完成这项工作。

使单选按钮出现＆＃34;选中＆＃34;您必须将活动样式应用于标签的班级列表。

预选选项需要.active

对于预选选项，您必须自己将.active类添加到输入标签中。

在Angular中动态修改元素类列表的方法是使用ng-class。您需要阅读该指令的文档，因为有几个选项可以使它工作。

我已经更新了您的示例以使用ng-class指令，现在点击它时按钮显示为活动状态。

我不建议这样做，特别是关于让你的控制器负责CSS课程的部分，但这是一个很好的起点，你可以找到在你的情况下做到这一点的最佳方法

查看

<div>poiType is initialized to 0, so the first button should be selected <div ng-controller="TodoCtrl as ctrl" style="margin-bottom: 5px; padding: 5px; width:100%;"> <div class="btn-group btn-group-justified"> <label ng-class="ctrl.class(ctrl.TYPE_POI)"> <input type="radio" ng-value="ctrl.TYPE_POI" ng-model="ctrl.poiType" />POI</label> <label ng-class="ctrl.class(ctrl.TYPE_TRIP)"> <input type="radio" autocomplete="off" ng-value="ctrl.TYPE_TRIP" ng-model="ctrl.poiType" />itinerari</label> <label ng-class="ctrl.class(ctrl.TYPE_EVENT)"> <input type="radio" autocomplete="off" ng-value="ctrl.TYPE_EVENT" ng-model="ctrl.poiType" />eventi</label> </div>ctrl.poiType = {{ctrl.poiType}}</div> </div>

<强>控制器

angular.module('epoiApp', []) .controller('TodoCtrl', function () { this.poiType = 0; // first button should be selected this.TYPE_POI = 0; this.TYPE_TRIP = 1; this.TYPE_WAYPOINT = 2; this.TYPE_EVENT = 3; this.class = function (poiType) { if (poiType == this.poiType) { return 'btn btn-default active'; } else { return 'btn btn-default'; } } });

以下是工作fiddle的链接。

Answer 2

我已经成功了：

<div ng-app="myApp">
  poiType is initialized to 0, so the first button should be selected
  <div ng-controller="TodoCtrl"
       style="margin-bottom: 5px; padding: 5px; width:100%;">
    <div class="btn-group btn-group-justified" 
         data-toggle="buttons">
       <label class="btn btn-default">
          <input type="radio"  ng-value="TYPE_POI"
               ng-model="poiType" 
               ng-change="popup()"/>POI
        </label>
        <label class="btn btn-default">
           <input type="radio" autocomplete="off" 
                  ng-value="TYPE_TRIP ||
                            TYPE_WAYPOINT "
                  ng-model="poiType"  
                  ng-change="popup()"/>itinerari
        </label>
        <label class="btn btn-default">
          <input type="radio" autocomplete="off"  
                 ng-value="TYPE_EVENT"
                 ng-model="poiType" 
                 ng-change="popup()"/>eventi
        </label>    
     </div>         
   </div>         
</div>

你需要为你的角应用程序创建一个模块来引用，在这里我称之为myApp并在主div中声明它（通常，你想在body标签中执行它）。然后，您可以创建一个控制器并使用scope模块初始化数据，然后如上所示使用它。这是js。

var myApp = angular.module("myApp", []);

myApp.controller("TodoCtrl", function ($scope) {
    var that = $scope;

    $scope.poiType = 0;

    $scope.TYPE_POI = 0;
    $scope.TYPE_TRIP = 1;
    $scope.TYPE_WAYPOINT = 2;
    $scope.TYPE_EVENT = 3;

    $scope.popup = function () {
        alert(that.poiType);
    };
});

jsfiddle

Answer 3

    <div class="btn-group btn-group-justified" 
             data-toggle="buttons">

data-toggle="buttons"隐藏了单选按钮。如果删除它，将显示

角度ng值不适用于输入无线电

3 个答案: