Настройка активного класса на кнопках радиостанции Bootstrap с AngularJS

Я попытался создать радиообъекты в radioGroup, используя директиву ng-repeat и кнопки с поведением флажка. Как мне это сделать правильно?Настройка активного класса на кнопках радиостанции Bootstrap с AngularJS

$scope.config = [{ 
    name: 'First', 
    callEvent: 'setValue()' 
}, { 
    name: 'Second', 
    callEvent: 'setValue()' 
}, { 
    name: 'Third', 
    callEvent: 'setValue()' 
}];

HTML

<div class="btn-group"> 
    <label ng-repeat="item in config" class="btn btn-primary classButton" 
     ng-click="item.callEvent" ng-model="radioModel" 
     uib-btn-radio="'{{item.name}}'">{{item.name}} 
    </label> 
</div>

источник

2015-11-10 Maksim

Можете ли вы сделать jsfiddle так что мы можем легко устранить? Правильно ли вы ссылаетесь на контроллер? Пометка вашего HTML как «ng-app»? Правильно ли ссылаетесь на 'angular.js'? И т.д? – Marc

Для вызова функций из пунктов добавленных ng-repeat директивы, используйте $index в качестве вызывающего аргумента. Кнопки Bootstrap используют класс active для указания выбора. Используйте директиву ng-class, чтобы добавить active в класс выбранной кнопки.

<body ng-controller="test"> 
    <div class="btn-group"> 
      <label ng-repeat="item in config" 
       class="btn btn-primary classButton" 
       ng-class="config[$index].btnClass" 
       ng-click="setActive($index)"> 
      {{item.name}} 
      </label> 
    <br> The active button is -- {{config[activeButton].name}} 
    </div>

В вашей модели контроллера:

angular.module('app', []).controller('test', function($scope) { 
    $scope.config = [{ 
      name: 'First', 
      btnClass: 'active' 
    }, { 
      name: 'Second', 
      btnClass: "" 
    }, { 
      name: 'Third', 
      btnClass: "" 
    }]; 
    $scope.activeButton = 0; 
    $scope.setActive = function setActive(index) { 
     $scope.activeButton = index; 
     for (var i = 0; i < $scope.config.length; i++) 
       $scope.config[i].btnClass = ""; 
     $scope.config[index].btnClass = 'active'; 
    }; 
});

Код в Plunker

источник

2015-11-10 18:36:31 georgeawg

Настройка активного класса на кнопках радиостанции Bootstrap с AngularJS

ответ

Смежные вопросы