Как мне получить ng-модель в btn-group

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>

В конце концов, мне нужно проверить эти настраиваемые "переключатели". Как я могу это сделать?

angularjs

0

Leandro Zago 27 Апр 2016 в 17:51

Answer 1

Вы можете использовать Bootstrap, чтобы стилизовать радиокнопки как переключатели. Это позволит вам сохранить тип ввода для использования ng-модели и проверки формы без использования описанного выше метода ng-click.

Вот простая демонстрация в скрипке.

Контроллер:

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>

0

Alex Chance 27 Апр 2016 в 17:25

Answer 2

У меня была такая ситуация, и я ее решаю так:

Я использовал 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 },
...
];

Этот оператор содержимого массива, который я использую как значение кнопки.

Надеюсь, это поможет.

0

DIEGO CARRASCAL 27 Апр 2016 в 17:34

Answer 3

У вас очень похожий код кнопок. Советую сгенерировать их из модели. И вы без проблем подключите их к контроллеру. Вот пример кода: в контроллере:

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

Я не уверен, как вы хотите представить изменения, но если вы объясните это более подробно, я отредактирую ответ, надеюсь, это поможет вам!

Обновлено

0

Mikki 27 Апр 2016 в 17:28

Как мне получить ng-модель в btn-group

3 ответа

Похожие вопросы

Новые вопросы

angularjs