角度ng值不适用于输入单选 [英] Angular ng-value doesn't work with input radio

问题描述

我有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小提琴

解决方案

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

要使单选按钮显示为已选中"，您必须将活动样式应用于标签的类别列表.

预选的选项需要.active

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

在Angular中动态修改元素的类列表的方法是使用 ng-class.您需要阅读该指令的文档，因为有多种方法可以使其生效.

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

我不建议这样做，特别是关于让控制器负责CSS类的部分，但这是您寻找适合您情况的最佳方法的一个很好的起点./p>

查看

 < div> poiType初始化为0，因此应选择第一个按钮< div ng-controller ="TodoCtrl as ctrl"style =" margin-bottom:5px;内边距:5px；宽度:100％；< div class ="btn-group btn-group-justified"< label ng-class ="ctrl.class(ctrl.TYPE_POI)"><输入类型＝无线电".ng-value ="ctrl.TYPE_POI"；ng-model ="ctrl.poiType"/> POI</label><标签ng-class ="ctrl.class(ctrl.TYPE_TRIP)"><输入类型＝无线电".autocomplete =关闭"；ng-value ="ctrl.TYPE_TRIP"；ng-model ="ctrl.poiType"/> itinerari</label>< label ng-class ="ctrl.class(ctrl.TYPE_EVENT)"><输入类型＝无线电".autocomplete =关闭"；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;//应该选择第一个按钮this.TYPE_POI = 0;this.TYPE_TRIP = 1;this.TYPE_WAYPOINT = 2;this.TYPE_EVENT = 3;this.class =函数(poiType){如果(poiType == this.poiType){返回'btn btn-default active';} 别的 {返回'btn btn-default';}}}); 

这里是工作的小提琴的链接.

I have 3 radio inputs bound to ctrl.poiType , where ctrl is the controller and poiType is an integer. ctrl.poiType can have one of the 3 values specified by four constants (ctrl.TYPE_TRIP, ctrl.TYPE_EVENT, ctrl.TYPE_POI).

So I've created three input radio, using ng-model and ng-value like this:

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

The radio should be checked if the value of ng-model is equal to ng-value, but it's not working. I don't know why.

[UPDATE] This is the right JS Fiddle of the example

解决方案

I'm assuming the problem you are trying to solve is to have the selected button appear active when you click it. Since you are using the Bootstrap styles without using the Bootstrap javascript component you will need to make this work yourself within Angular.

To make the radio button appear "checked" you must apply the active style to the label's class list.

Preselected options need .active

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

The way to modify an element's class list dynamically in Angular is to use ng-class. You'll need to read the documentation for the directive as there are several options to how to make it work.

I've updated your example to make use of the ng-class directive and it is now making the button appear active when you click it.

I wouldn't recommend doing it exactly like this, especially the part about having your controller be responsible for CSS classes, but this is a good starting point for you to figure out the best way to do it in your situation.

View

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

Controller

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

Here is a link to the working fiddle.

这篇关于角度ng值不适用于输入单选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！