각도 JS : I 한 버튼 (myCtrl.onactive 또는 myCtrl.offactive)가 true 겨 클래스이어야의 IT로 설정 "활성"클래스를 갖는 버튼 그룹이

Question

NG-클래스 전환 2 개 단추

<div class="btn-group pull-right"> 
     <button ng-class="{active: myCtrl.onactive}" class="btn" ng-click="myCtrl.changeColorIcons()">on</button> 
     <button ng-class="{active: myCtrl.offactive}" class="btn" ng-click="myCtrl.changeColorIcons()">off</button> 
</div> 

내가 활성 클래스를 가질 클릭 중 버튼을 만들려고 노력하고있어 (다른 하나는하지 않음)

지금까지 내가 내 컨트롤러에이 노력하고있어 (작업 그러나 이것은 내가 후에 갈거야 무엇을하지), 더 좋은 방법이 있어야합니다 ...

self.onactive = true; //by default the "on" button is active 

//but when a button is clicked turn the one that's active off and make the other active 
this.changeColorIcons = function() { 
    (self.onactive) ? self.offactive = true; self.onactive = false; : self.onactive = true; self.offactive = false; 
}; 

Answer 1

은 단순히 JS에서 아래와 같은 기능을 추가, 코드를 작동하고

var app = angular.module("app", []); 
 
app.controller("Ctrl", ["$scope", 
 
    function($scope) { 
 

 
    var myCtrl = this; 
 
    myCtrl.onactive = true; 
 
    myCtrl.offactive = false; 
 

 
    myCtrl.changeColorIcons = function(button) { 
 

 
     if (button === 'on') { 
 
     myCtrl.onactive = true; 
 
     myCtrl.offactive = false; 
 
     } else if (button === 'off') { 
 
     myCtrl.onactive = false; 
 
     myCtrl.offactive = true; 
 
     } 
 
    }; 
 
    } 
 
]);

.active { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="Ctrl as myCtrl" class="btn-group pull-right"> 
 
    <button ng-class="{active: myCtrl.onactive}" class="btn" ng-click="myCtrl.changeColorIcons('on')">on</button> 
 
    <button ng-class="{active: myCtrl.offactive}" class="btn" ng-click="myCtrl.changeColorIcons('off')">off</button> 
 
    </div> 
 
</div>

Answer 2

나는 당신이 단지 HTML을 chaning이 문제에 대한 해결책을 얻을 수 있다고 생각, 컨트롤러 체크 아웃이 바이올린 기능을 만들 필요가 나는 당신 http://jsfiddle.net/Lvc0u55v/11094/

또는 단지와 HTML 코드를 대체 할 준비하지 않은 한 아래 :

다음은

<div class="btn-group pull-right"> 
<button ng-class="onactive" class="btn" ng-click="onactive='active'; offactive='inactive';">on</button> 
<button ng-class="offactive" class="btn" ng-click="offactive='active';onactive='inactive'">off</button> 
</div>