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

Bind Bootstrap Radio Button To Angular Property

本文关键字：属性 绑定 单选按钮      更新时间：2023-09-26

我在获取绑定到角度属性的引导程序单选框选择时遇到问题。

这是我的东西，它不起作用。

HTML引导程序

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

角度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变量？

我放弃了让绑定工作的尝试，并采用了另一种方法，通过html 中内联的ng-click方法更改角度范围中的值

    <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设置为coin或bill。这种方法并不完美，但在有人想出如何绑定单选按钮之前，它暂时有效。

你能试试这个吗

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

更新：这是一个小提琴的链接

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}}
相关文章：