如何获取复选框的列表，表现得像AngularJS的下拉菜单

下拉菜单可以很好地获得单选按钮行为并隐藏很长的列表...但我从来不喜欢它们..它们要求用户点击才能看到列表和他们的风格与页面不匹配。如何获取复选框的列表，表现得像AngularJS的下拉菜单

我想找到一个更加动态的方式使用角度。

如何在显示复选框列表并勾选复选框后隐藏所有未勾选的复选框？取消选中复选框应该再次显示所有复选框...

我试过以下，但没有任何运气。

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

来源

2016-07-05 Norfeldt

起初，你可以删除{} {}您的过滤参数的时''。 – developer033

sorta works ..但现在没有复选框可见.. – Norfeldt

你想禁用所有其他复选框，如果任何复选框或如果特定复选框被选中？ – developer033

如果我明白你的问题很好，它应该工作：

(function() { 
 
    "use strict"; 
 
    angular.module('app', []) 
 
    .controller('mainCtrl', function($scope) { 
 
     var vm = this; 
 

 
     vm.albums = [ 
 
     { 
 
      "id":"1", 
 
      "name":"Album 1" 
 
     }, 
 
     { 
 
      "id":"2", 
 
      "name":"Album 2" 
 
     }, 
 
     { 
 
      "id":"3", 
 
      "name":"Album 3" 
 
     } 
 
     ]; 
 

 
     vm.selected = {}; 
 
     vm.disable = {}; 
 

 
     $scope.$watch(function() { 
 
      return vm.selected; 
 
     }, 
 
     function(newVal, oldVal) { 
 
      var newValIndex = 0; 
 
      for (var key in newVal) { 
 
      if (newVal[key]) { 
 
       newValIndex = parseInt(key); 
 
      } 
 
      } 
 
      for (var i = 0; i < vm.albums.length; i++) { 
 
      vm.disable[i] = i === newValIndex ? false : newVal[newValIndex.toString()]; 
 
      } 
 
     }, true); 
 
    }); 
 
})();

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl as main"> 
 
    <ul> 
 
    <li ng-repeat="album in main.albums"> 
 
     <input type="checkbox" id="album{{$index}}" value="{{album}}" ng-model="main.selected[$index]" ng-disabled="main.disable[$index]"> 
 
     <label for="album{{$index}}" ng-bind="album.name"></label> 
 
    </li> 
 
    </ul> 
 
    <pre ng-bind="main.selected | json"></pre> 
 
</body> 
 

 
</html>

我希望它能帮助。

来源

2016-07-05 22:55:38 developer033

我找到了一个使用控制器的解决方案。

控制器

albums = [ 
    { 
     "id":"1", 
     "name":"Album 1" 
    }, 
    { 
     "id":"2", 
     "name":"Album 2" 
    }, 
    { 
     "id":"3", 
     "name":"Album 3" 
    } 
    ]; 

$scope.display = (new Array(albums.lenght)).fill(true); 

var onlyOneTrue = function(){ 
    if ($filter("filter")($scope.display , true).length == 1){ 
     return true; 
    } else { 
     return false; 
    } 
    } 

$scope.changed = function(index) { 
    if (onlyOneTrue()) { 
    $scope.display.fill(true); 
    } else { 
    $scope.display.fill(false)[index] = true; 
    } 
}

HTML

<ul> 
    <li ng-repeat="album in albums' "> 
    <input type="checkbox" ng-show="display[$index]" ng-click="changed($index)"> 
    {{album.name}} 
    </input> 
    </li> 
</ul>

来源

2016-07-06 20:22:07 Norfeldt

如何获取复选框的列表，表现得像AngularJS的下拉菜单

回答

相关问题