如何使用 AngularJS 获取复选框列表以使其表现得像下拉列表答案

【问题标题】：How to get list of checkboxes to behave like a dropdown with AngularJS如何使用 AngularJS 获取复选框列表以使其表现得像下拉列表
【发布时间】：2016-07-07 04:22:07
【问题描述】：

下拉菜单很好地获得单选按钮行为并隐藏长列表...但我从不喜欢它们..它们需要用户单击才能查看列表，并且它们的样式与页面不匹配。

我想找到一种使用 Angular 的更动态的方式。

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

我尝试了以下方法，但没有任何运气。

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

【问题讨论】：

首先您可以删除过滤器参数的{{ }}。
排序工作..但现在没有复选框可见..
如果任何复选框或特定复选框被选中，您想禁用所有其他复选框？
如果有任何被选中 - 就像从下拉菜单中选择时
您肯定需要为此构建自己的指令。听起来并不复杂

标签： html angularjs checkbox

【解决方案1】：

如果我能很好地理解你的问题，它应该可以工作：

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

希望对你有帮助。

【讨论】：

【解决方案2】：

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

控制器

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>

【讨论】：