从v1.3.0开始，ng-change，ng-click不适用于data-toggle =“ buttons”

一尘不染

从v1.3.0开始，ng-change，ng-click不适用于data-toggle =“ buttons”

angularjs

适用于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

阅读 253

2020-07-04

共1个答案

一尘不染

在处理Angular时，您不应依赖Bootstrap
javascript。Bootstrap的jQuery插件不是为Angular量身定制的。如果要使用Bootstrap
JS，则应考虑使用其他Angular模块，例如AngularUI Bootstrap或AngularStrap，它们提供专用的指令来实现相应的Bootstrap插件功能。

这是AngularUI引导程序的外观：

<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

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

演示：http：//plnkr.co/edit/pPTir7YGwJKt5L5oxVYX？p
= preview

2020-07-04