将 Bootstrap 单选按钮绑定到 Angular 属性

Question

I am having troubles getting a bootstrap radio box selection to bind into an angular property.

Here is what I have, it is not working.

HTML BOOTSTRAP

 <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-success active">
            <input type="radio" value="bill" ng-model="newItemType" name="options" id="option1" autocomplete="off" checked> Insert New Bill <span class="glyphicon glyphicon-file"></span> 
          </label>
          <label" class="btn btn-success ">
            <input type="radio" value="coin" ng-model="newItemType" name="options" id="option2" autocomplete="off"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>  
          </label>
        </div>

ANGULAR JAVASCRIPT

var CurrencyInventoryBillController = function($scope, $http)
{
    $scope.newItemType = "NOT SELECTED";

    //TRIGGERED ON BUTTON CLICK. ALERT SHOWS 'NOT SELECTED' REGARDLESS OF WHICH RADIO BTN IS SELECTED
    $scope.insertNewCurrencyItem = function()
    {
        alert($scope.newItemType);
    }

}

Why is the VALUE and NG-MODEL directives not changing the SCOPE variable in this case?

Answer 1

I aborted trying to get the bindings to work, and went with another approach, changing the values in the angular scope via the ng-click method inline in the html

    <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-success" ng-class="{'active':newItemType=='bill'}" ng-click="newItemType='bill'" > 
         <input type="radio"> Insert New Bill <span class="glyphicon glyphicon-file"></span> 
      </label> 
      <label class="btn btn-success" ng-class="{'active':newItemType=='coin'}" ng-click="newItemType='coin'" >
        <input type="radio"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
      </label>
    </div>

Notice the ng-click event sets the newItemType to coin or bill. This approach is imperfect, but it works for now until someone can figure out how to bind radio buttons.

Answer 2

Can you try this

$scope.newItemType = 'bill';

<div class="btn-group" data-toggle="buttons">
   <label class="btn btn-success" ng-class="{'active':newItemType=='bill'}" > 
     <input type="radio" value="bill" ng-model="newItemType"> Insert New Bill <span class="glyphicon glyphicon-file"></span> 
  </label> 
  <label class="btn btn-success" ng-class="{'active':newItemType=='coin'}" >
    <input type="radio" value="coin" ng-model="newItemType"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
  </label>
</div>

Update: Here is the link to a fiddle

Answer 3

 var app = angular.module('myApp', []); app.controller('MainCtrl', function($scope) { });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" /> <div ng-app="myApp"> <div ng-controller="MainCtrl"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-success" ng-class="{'active':newItemType=='bill'}"> <input type="radio" value="bill" ng-model="newItemType" name="options">Insert New Bill <span class="glyphicon glyphicon-file"></span> </label> <label class="btn btn-success" ng-class="{'active':newItemType=='coin'}"> <input type="radio" value="coin" ng-model="newItemType" name="options">Insert New Coin <span class="glyphicon glyphicon-adjust"></span> </label> </div> <br/> {{newItemType}} </div> </div>

You have it you just have to change your class active to actually see it.

   <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-success" ng-class="{'active':newItemType=='bill'}">
        <input type="radio" value="bill" ng-model="newItemType" name="options" id="option1" autocomplete="off" checked> Insert New Bill <span class="glyphicon glyphicon-file"></span> 
      </label>
      <label class="btn btn-success" ng-class="{'active':newItemType=='coin'}">
        <input type="radio" value="coin" ng-model="newItemType" name="options" id="option2" autocomplete="off"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>  
      </label>
    </div>

 <br/>
 {{newItemType}}