我正在尝试从 button-checkbox 获取数组中所选按钮的 ID。我能够在 View 中成功显示所选按钮的 id，但无法在 Controller 中以数组形式获取所选 id。
这是我的 HTML 代码
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS BootStrap UI radios</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div class="btn-group-justified">
<label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="service.selected" ng-click="test(availability.services)" btn-checkbox >{{service.name}}</label>
</div>
<div ng-repeat="service in availability.services"><span ng-show="service.selected">{{service.id}}</span></div>
</body>
</html>
这是 Controller
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
var services = [
{ name:'Service A',id:1 },
{ name:'Service B',id:2},
{ name:'Service C',id:3 },
{ name:'Service D',id:4}
];
$scope.availability = { services:services };
});
请查看 plnker 链接
最佳答案
给你:
$scope.getSelectedIDs = function() {
var ids = [];
angular.forEach($scope.availability.services, function(service) {
if (service.selected) {
ids.push(service.id);
}
})
return ids;
};
现在，只需在 Controller 中您希望数组中包含所选 ID 的任意位置调用方法 $scope.getSelectedIDs() 即可。
http://plnkr.co/edit/rS47sIEo1HaaDqrc3BUw?p=preview
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
var services = [{
name: 'Service A',
id: 1
}, {
name: 'Service B',
id: 2
}, {
name: 'Service C',
id: 3
}, {
name: 'Service D',
id: 4
}];
$scope.availability = {
services: services
};
$scope.getSelectedIDs = function() {
var ids = [];
angular.forEach($scope.availability.services, function(service) {
if (service.selected) {
ids.push(service.id);
}
})
return ids;
};
$scope.alertMeSelectedIDs = function() {
console.log($scope.getSelectedIDs());
alert($scope.getSelectedIDs());
};
});<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS BootStrap UI radios</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div class="btn-group-justified">
<label ng-repeat="service in availability.services" class="btn btn-primary" ng-model="service.selected" ng-click="test(availability.services)" btn-checkbox>{{service.name}}</label>
</div>
<div ng-repeat="service in availability.services"><span ng-show="service.selected">{{service.id}}</span>
</div>
<br>
<a ng-click="alertMeSelectedIDs()">Show me selected</a>
</body>
</html>关于javascript - 使用 AngularJS 获取数组中选定的按钮 id，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34334216/