如何獲取複選框的列表，表現得像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的下拉菜單

回答

相關問題