从v1.3.0开始，ng-change，ng-click不能与数据一起工作-toggle=“buttons”
从v1.3.0开始，ng-change，ng-click不能与数据一起工作-toggle=“buttons”
提问于 2015-01-12 15:29:44
适用于angular版本1.3.4。在下面的代码片段中，ng-change事件不起作用。
依赖关系:引导程序版本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
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-01-12 15:46:24
在处理Angular时，您不应该依赖Bootstrap javascript。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="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>
Stack Overflow用户
发布于 2020-08-22 22:41:47
最简单的方法是将ng-click移动到封闭的标签标记。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27897175
复制相关文章
相似问题
腾讯云开发者
