Angular ng-value 不适用于输入无线电 [英] 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，如下所示:

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

如果ng-model 的值等于ng-value，应该检查无线电，但它不起作用.我不知道为什么.

[更新]这是示例的正确 JS Fiddle

解决方案

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

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

<块引用>

预选的选项需要 .active

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

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

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

我不建议完全这样做，尤其是让您的控制器负责 CSS 类的部分，但这是您找出在您的情况下执行此操作的最佳方法的一个很好的起点.

查看

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><label ng-class=ctrl.class(ctrl.TYPE_TRIP)"><输入类型=收音机"自动完成=关闭"ng-value=ctrl.TYPE_TRIP"ng-model=ctrl.poiType"/>行程</label><label ng-class="ctrl.class(ctrl.TYPE_EVENT)"><输入类型=收音机"自动完成=关闭"ng-value=ctrl.TYPE_EVENT"ng-model=ctrl.poiType"/>eventi</label></div>ctrl.poiType = {{ctrl.poiType}}</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){return 'btn btn-default active';} 别的 {返回 '​​btn btn-default';}}});

这是一个链接到工作 fiddle.

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.

这篇关于Angular ng-value 不适用于输入无线电的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！