Ng-change, ng-click не работают с data-toggle = "buttons", поскольку v1.3.0

для angular версии 1.3.4. В следующем фрагменте событие ng-change не работает.

зависимость: Bootstrap версия 3.3.0

Ниже код работает до версии 1.2.27

Javascript

var app = angular.module("demoApp", ['ngRoute']);

app.controller('DemoController', function ($scope) {
    init();
    function init() {
        $scope.newItemType = 'bill';
        $scope.change = function () {
            alert($scope.newItemType)
        };
    }
});

app.config(function ($routeProvider) {
    $routeProvider
        .when('/prerak/list', {
            controller: 'DemoController',
            templateUrl: '/app/views/demo.html'
        })
});

HTML

<h4>Demo</h4>

<br />

<div>
    <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-success"> 
         <input type="radio" value="bill" ng-change="change()" ng-model="newItemType"> Insert New Bill <span class="glyphicon glyphicon-file"></span> 
      </label> 
      <label class="btn btn-success">
        <input type="radio" value="coin" ng-change="change()" ng-model="newItemType"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
      </label>
    </div>
           <br/><br/> Selected Item: <b>{{newItemType}}</b>
</div>

Ниже приведен plunkr (для более простой версии): http://plnkr.co/edit/yU9unxI8F6u2ToQzlUV2

Ответы

Ответ 1

Вы не должны полагаться на javascript Bootstrap, когда имеете дело с Angular. Плагины bootstrap jQuery не предназначены для Angular из коробки. Если вы хотите использовать Bootstrap JS, вы должны рассмотреть дополнительные Angular модули, такие как AngularUI Bootstrap или AngularStrap, которые предоставляют специальные директивы, которые реализуют соответствующие функциональные возможности модуля Bootstrap.

Вот как он будет выглядеть с помощью AngularUI Bootstrap:

<div class="btn-group">
    <label class="btn btn-success" btn-radio="'bill'" ng-change="change()" ng-model="newItemType">
        Insert New Bill <span class="glyphicon glyphicon-file"></span>
    </label>
    <label class="btn btn-success" btn-radio="'coin'" ng-change="change()" ng-model="newItemType">
        Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
    </label>
</div>

Не забудьте объявить новую зависимость в этом случае:

angular.module("demoApp", ['ui.bootstrap'])

Вот как он будет выглядеть вместе

angular.module("demoApp", ['ui.bootstrap']).controller('DemoController', function ($scope) {
    $scope.newItemType = 'bill';
    $scope.change = function () {
        console.log($scope.newItemType)
    };
});
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'; return false;" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>

<div class="container" ng-app="demoApp" ng-controller="DemoController">
    <h2>Radio Buttons</h2>
    <div class="btn-group">
        <label class="btn btn-success" btn-radio="'bill'" ng-change="change()" ng-model="newItemType">
            Insert New Bill <span class="glyphicon glyphicon-file"></span>
        </label>
        <label class="btn btn-success" btn-radio="'coin'" ng-change="change()" ng-model="newItemType">
            Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
        </label>
    </div>
    <p>Selected Item: <b>{{newItemType}}</b></p>
</div>