将Bootstrap单选按钮绑定到角度属性

Question

我遇到麻烦获取引导单选框要绑定到角度属性。

这是我有，它不工作。

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); 
    } 

} 

为什么价值和NG-MODEL指令不改变在这种情况下，scope变量？

Answer 1

你可以试试这个

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

更新：Here is the link to a fiddle

Answer 2

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>

你拥有了它，你只需要改变你的active类真正看到它。

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

Answer 3

我放弃试图获取绑定工作，并用另一种方法去，通过NG-click方法内嵌在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> 

通知纳克-click事件将newItemType设置为硬币或账单。这种方法吸驴球，但它现在的作品，直到有人可以弄清楚如何绑定单选按钮。