AngularJS数据绑定

HTML

<div ng-app="MyAPP">
  <div ng-controller="MainCtrl as vm">
<button type="button" class="btn1" ng-click='vm.toggle(1)' ng-class="{btn2: 1 == vm.clickedBtn}">1</button>
<button type="button" class="btn1 " ng-click='vm.toggle(2)' ng-class="{btn2: 2 == vm.clickedBtn}">2</button>
<button type="button" class="btn1 " ng-click='vm.toggle(3)' ng-class="{btn2: 3 == vm.clickedBtn}">3</button>
  </div>
</div>

CSS

.active {
  background-color: blue;
  color: red;
}
      .btn1{
      border:none;
      width: 100px;
      height:50px;
      background-color:#eeeeee;
      color:black;
      margin-top:0.5em;
      border-radius:1em;
      }
      .btn2{
      border:none;
      width: 100px;
      height:50px;
      background-color:#3E8CD0;
      color:white;
      border-radius:1em;
      }

JavaScript

(function(){
	angular.module('MyAPP', [])
  .controller('MainCtrl', MainCtrl);
  
  MainCtrl.$inject = [];
  
  function MainCtrl() {
  	var vm = this;
    vm.toggle = toggle;
    
    function toggle(id) {
    	vm.clickedBtn = id;
      // TODO
    }
    
  }
})();