Question

我如何在ng-model中拥有btn-group？它像单选按钮一样工作，每次单击一个特定按钮时我都需要控制答案。

这是我的代码：

<div class="btn-group">
    <button type="button" class="btn  btn-sm btn-primary"
            ng-click="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes = 1"
            ng-class="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes == 1 ? [''] : ['btn-info']">
        Yes
    </button>
    <button type="button" class="btn  btn-sm btn-primary"
            ng-click="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes = 2"
            ng-class="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes == 2 ? [''] : ['btn-info']">
        No
    </button>
    <button type="button" class="btn  btn-sm btn-primary"
            ng-click="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes = 9"
            ng-class="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes == 9 ? [''] : ['btn-info']">
        Ignored
    </button>
</div>

最后，我需要验证这些自定义“单选按钮”。我怎么能这样做？

Answer 1

你有非常相似的按钮代码。我建议你从模型中生成它们。将它们链接到控制器没有问题。这是代码示例：控制器中的：

 $scope.buttonChecked = 1;
 $scope.buttons = [
    {
        text: 'Yes',
        value: 1
    }, {
        text: 'NO',
        value: 2
    }, {
        text: 'Ignored',
        value: 9
    }
];

和视图：

<div class="btn-group">
    <button ng-repeat="button in buttons" type="button" class="btn  btn-sm btn-primary"
            ng-click="buttonChecked = button.value"
            ng-class="buttonChecked == button.value ? [''] : ['btn-info']">
     {{button.text}}
    </button>
</div>

我不确定您希望如何代表更改，但如果您将解释更多详细信息，我将编辑答案，希望它能为您提供帮助！

<强>更新

Answer 2

您可以使用Bootstrap将单选按钮设置为切换按钮的样式。这将允许您保留输入类型以使用ng-model和表单验证，而无需使用上面的ng-click方法。

以下是fiddle中的简单演示。

<强>控制器：

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

app.controller('MyCtrl', function MyCtrl($scope) {
    $scope.people = [{
        name: "John"
    }, {
        name: "Paul"
    }, {
        name: "George"
    }, {
        name: "Ringo"
    }];

    $scope.choices = {};
});

<强> HTML：

<form name="myForm" ng-app="myApp" ng-controller="MyCtrl">
<p>Favorite Beatle</p>
<div class="btn-group-vertical" data-toggle="buttons">
  <label class="btn btn-primary" ng-repeat="person in people">
    <input type="radio" name="options" id="option1" autocomplete="off" ng-model="choices.SelectedPerson" value="{{person.name}}" required> {{person.name}}
  </label>
</div>

<p><tt>myForm.$invalid: {{myForm.$invalid}}</tt></p>

  You chose: <strong>{{choices.SelectedPerson}}</strong>

<button ng-disabled="myForm.$invalid">Submit</button>

Answer 3

我有类似的情况，我这样解决：

我使用li来定位按钮，并且是<button>...仅用于外观的“真实”可点击元素：D

<ul>
    <li ng-repeat="item in buttons" ng-show=item.view ng-click="goToNgRepeat(item.op);" ng-style="{'display':'inline-block'}">
        <button class="menuBtn" ng-style="{'width':item.size, 'height':menuButtonHeight}"><b>{{ item.tx }}</b></button>
    </li>
</ul>

并通过ng-click调用函数并传递一个值来解决按下哪一个，该值在按钮数组中定义：

$scope.buttons = [
  { "tx": "Alm Extn", "op": 0, "view": true, "viewCont": false, "file": "TXT/extn.htm", "size": topicButtonsPos.menuButtonW },
  { "tx": "DS", "op": 1, "view": true, "viewCont": false, "file": "TXT/Ds.htm", "size": topicButtonsPos.menuButtonW },
  { "tx": "CDnt", "op": 2, "view": true, "viewCont": false, "file": "TXT/C.htm", "size": topicButtonsPos.menuButtonW },
  { "tx": "CDnt", "op": 3, "view": true, "viewCont": false, "file": "TXT/CA.htm", "size": topicButtonsPos.menuButtonW },
...
];

这个数组内容op用作按钮值。

希望它有所帮助。

如何在btn-group中使用ng-model

3 个答案: