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

Question

我遇到了一个问题，无法将Bootstrap单选框的选择绑定到Angular属性上。

这是我的代码，但它不起作用。

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

}

为什么在这种情况下，VALUE和NG-MODEL指令不能更改SCOPE变量？

- jordan

Answer 1

我曾尝试让绑定工作，但最终放弃了，并采用另一种方法，在html中通过ng-click方法内联更改angular范围内的值。

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

注意 ng-click 事件将 newItemType 设置为硬币或纸币。这种方法并不完美，但它目前可行，直到有人能够找出如何绑定单选按钮。

- jordan

Answer 2

你能试一下这个吗？

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

更新：这里是一个fiddle的链接

- Srinivas Paila

---

你可以在输入框中添加 ng-change='insertNewCurrencyItem()' 来观察选择时模型的变化。 - Srinivas Paila

刚试了一下，它并没有改变作用域变量。 - jordan

当我在后端更改范围变量时，它会突出显示正确的按钮，但单击按钮实际上不会更改范围变量。 - jordan

你有没有机会看一下这个fiddle？ - Srinivas Paila

有趣的是，它在fiddle上似乎可以工作，但当我直接将您的代码复制到我的网站上时，它似乎无法工作。今晚我会再次尝试使用来自fiddle的代码，并查看是否可以再次使这些值和ng-model绑定起来。感谢您的检查。 - jordan

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>

你已经拥有它，只需要将你的类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}}

- Dylan

---

这只是上面答案的复制。 - jordan