如何在AngularJS中获取复选框的值？

Question

在我的 ng-view 中有 10（或 n）个复选框。现在我想问的是，检查复选框是否被选中并获取其值的最有效或简单的方法是什么。

<ul>
  <li ng-repeat="album in albums">
   <input type="checkbox" ng-model="folder.Selected" value={{album.name}} />
   </li>
  </ul>

我有一个ng-controller(getAlbumsCtrl)，其中我有一个数组，我想把所有选中的专辑名称推入albumNameArray中。

- Kgn-web

Answer 1

你可以循环遍历数组，找出哪个被选中，并将其推入名称数组中。

<ul>
  <li ng-repeat="album in albums">
    <input type="checkbox" ng-model="album.selected" value={{album.name}} />
  </li>
</ul>

$scope.save = function(){
  $scope.albumNameArray = [];
  angular.forEach($scope.albums, function(album){
    if (!!album.selected) $scope.albumNameArray.push(album.name);
  })
}

// alternatively you can use Array.prototype.filter on newer browsers (IE 9+)
$scope.save = function(){
  $scope.albumNameArray = $scope.albums.filter(function(album){
    return album.selected;
  });
}

jsbin

- Icycool

---

我认为如果 (!!album.selected) 应该很简单 'if (album.selected) { $scope.albumNameArray.push(album.name);' } 但是当我这样做时...我得到了 (album.selected) = undefined。然而，仅仅为了检查目的，我做了 value = {{album.selected}} 它是正确的..但是在控制器中它给我 undefined 错误.. - Kgn-web

这是我正在做的事情 JavaScript:- angular.forEach($scope.albums, function (album) { if (album.selected) { $scope.albumNames.push(album.name); } });HTML :-<input type="checkbox" class="checkbox-inline" ng-model="album.selected" value="{{album.name}}" /> 我发现album.selected = undefined。 - Kgn-web

抱歉，我没有看到复选框的值。通常情况下，当我使用复选框时，不会设置值，只使用ng-model。如果值对模型有影响，您可以检查模型是否已经是名称本身而不是对象吗？ - Icycool

我在我的routeConfig中有2个配置。其中之一是：$routeProvider. when('/albums', { templateUrl: 'xyz.html', controller: 'getAlbumsCtrl' }) .when('/Album/:AlbumName', { templateUrl: 'xyz.html', controller: 'getAlbums12Ctrl' })在getAlbums12Ctrl()中，我正在$routeParams中收集AlbumName，但我需要的是跟随Album/*的任何内容，请将其收集在AlbumName($routeParams)中像这样 ** /albums/bollywood >>(AlbumName = "bollywood")** **/albums/bollywood/old >> (AlbumName = "bollywood/old)" /albums/* - Kgn-web

我可能对路由不够了解，无法回答这个问题，您可以开一个新的问题，让更懂的人来回答。 - Icycool

Answer 2

请看这个fiddle，我使用的是以相册名称为键的对象。 <input type="checkbox" ng-model="folder[album.name]" value={{album.name}}/> 控制器：

function ctrl($scope){
$scope.albums = [{name:'a1'},{name:'a2'},{name:'a3'}];
$scope.folder = {};
$scope.albumNameArray = [];
$scope.getAllSelected = function(){          
    angular.forEach($scope.folder,function(key,value){
        if(key)
            $scope.albumNameArray.push(value)
    });
}}

- Praveen

---

嗨@praveen，你能回答这个问题吗？http://stackoverflow.com/questions/42689519/x-editable-checkbox-in-meanstack-angularjs - jose

Answer 3

你可以在这里简单使用angular过滤器，同时你的ng-model应该是album.Selected而不是folder.Selected Html

{{(albums | filter : { Selected: true }: true)}}

控制器

$scope.albumNameArray = $filter('filter')($scope.albums, { Selected: true }, true);

在控制器中使用之前，请不要忘记将 $filter 添加到您的控制器中。

- Pankaj Parkar

---

对我很重要...$scope.save = function() { }$scope.read = function() {}假设我想从read函数调用save函数...因为当我这样做时，会出现"save()未定义"的错误。我是这样做的：$scope.read = function() { save(); } - Kgn-web

如果@Chetan在作用域中有两种方法，则应该是$scope.read = function() { $scope.save(); }。 - Pankaj Parkar

我在我的routeConfig中有两个配置..其中一个是$routeProvider. when('/albums', { templateUrl: 'xyz.html', controller: 'getAlbumsCtrl' }) .when('/Album/:AlbumName', { templateUrl: 'xyz.html', controller: 'getAlbums12Ctrl' })在getAlbums12Ctrl()中，我正在收集AlbumName是$routeParams，但我需要的是任何跟随Album/的内容，请将其收集到AlbumName($routeParams)中 @Pankaj 像这样 ** /albums/bollywood >>(AlbumName = "bollywood")* **/albums/bollywood/old >> (AlbumName = "bollywood/old)" /albums/* - Kgn-web

Answer 4

如果你想要打印出值，
你可以使用以下方式：

input type="checkbox" ng-model="checkboxModel.value2" ng-true-value="'YES'" ng-false-value="'NO'" 

- Luckieee