Angular ng-value 不适用于输入收音机

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，应该检查收音机，但它不工作。不知道为什么。

[更新] 这是右边的例子JS Fiddle

Answer 1

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

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

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>

您需要为您的 angular 应用程序创建一个模块来引用，这里我将其命名为 myApp 并在主 div 中声明它（通常，您希望在正文中进行标签）。然后你可以创建一个控制器并使用 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

我假设您要解决的问题是在您单击所选按钮时使其显示为活动状态。由于您使用的是 Bootstrap 样式而不使用 Bootstrap javascript 组件，因此您需要在 Angular.

中自行完成这项工作

要使单选按钮显示为“已选中”，您必须将活动样式应用于标签的 class 列表。

Preselected options need .active

For preselected options, you must add the .active class to the input's label yourself.

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

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

我不建议完全这样做，尤其是让您的控制器负责 CSS classes 的部分，但这是您了解的一个很好的起点在您的情况下最好的方法。

查看

<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';
        }
    }
});

这是link工作fiddle。

Angular ng-value 不适用于输入收音机

Angular ng-value doesn't work with input radio

javascript

angularjs

angular-ngmodel

angularjs-ng-value