Question

我有复选框列表作为过滤器。但是，其中一些列表太长了。我希望能够将它们切换到指定的长度或全长以便用户体验。我设法让它像这样工作，但问题是，使用这种方法，点击链接将切换所有列表而不仅仅是一个。所以我需要单独为每个列表工作。

在我的控制器中：

$scope.limit = 5;
$scope.isShowMore = true;

$scope.showMore = function() {

    $scope.limit = $scope.length;
    $scope.isShowMore = false;
};

$scope.showLess = function() {

    $scope.limit = 5;
    $scope.isShowMore = true;
}

在我看来：

<ul>
 <h4>By Country</h4>
 <li ng-repeat="country in countries | limitTo:limit">
  <div class="form-check">
   <label class="form-check-label">
    <input style="vertical-align:middle;position:relative;bottom:3px;" ng-model="filter.country[country]" class="form-check-input" type="checkbox" checked="checked" value="{{country}}">{{country | capitalise}}
   </label>
  </div>
 </li>
</ul>
<a href="javascript:;" ng-click="showMore()" ng-show="isShowMore">... Show More</a><a href="javascript:;" ng-click="showLess()" ng-hide="isShowMore">... Show Less </a>

我想我应该将它从我的控制器中移出一个指令，但不知道这是否正确或如何这样做。我是AngularJS的新手，请帮忙！：）

Answer 1

是的，最好有一个我已经制作的自定义指令，如果以后如果你想要使用多个复选框并且需要收集收集的所有项目你可以使用，我可以使用如下所示自定义指令。这是关于如何使用它的link。

以下是HTML中的示例代码段

<body ng-app="mainApp" ng-controller="MainCtrl">
 <h1>Multi Check box</h1>
 <multi-checkbox selectedlist="req.selectedList" orginallist="req.sourceList" value="code" label="desc" all="true" sort-by="desc"></multi-checkbox>
 <pre ng-cloak>{{req.selectedList |json}}</pre>
</body>

这需要一个源列表（orginallist）和一个目标列表（selectedlist），其中应该选择值，它还根据您的需要对列表进行排序。

只需在您的JS文件中添加此指令，您就可以随时随地使用此指令，这是一次性活动。所以我希望这对您有帮助。

mainApp.directive('multiCheckbox', ['$log', '$filter', '$timeout', function($log, $filter, $timeout) {

    return {

        restrict: 'EA',//E-element & A - attribute

        template:

            '<div> <div ng-show="checkbox.showAll" class="checkbox"> ' +

            '<label style="font-size: 12px"> <input type="checkbox" ' +

            'id="all" name="all" ng-model="checkbox.all" ' +

            'ng-checked="checkbox.all" ng-change="selectAll()" /> All ' +

            '</label> ' +

            '</div>' +

            '<div ng-repeat="item in list  track by $index "class="checkbox"> ' +

            '<label style="font-size: 12px"> <input type="checkbox" ' +

            'id="{{item.value}}" name="{{item.label}}"  ' +

            'ng-checked="item.checked" ng-click="$parent.toggle($index)"/> {{item.label}}' +

            '</label>' +

            '</div> </div>',

        replace: true,  //to replace our custom template in place of tag <multi-checkbox>

        transclude: false,//make it true if we want to insert anything  btw directive tags

        scope: {  //isolate scope created 

            selectedlist: '=',

            orginallist: '=',

            value: '@',

            label: '@',

            all: '@',

            sortBy: '@'

        },

        link: function($scope, element, attrs) {

            $scope.checkbox = {};

            $scope.checkbox.all = false; //set 'All' checkbox to false

            $scope.checkbox.showAll = $scope.all == 'true' ? true : false;//to show/hide 'All' checkbox

            //function called on click of check box
            $scope.toggle = function(index) {

                var item = $scope.list[index];

                var i = $scope.selectedlist.length > 0 ? $scope.selectedlist.indexOf(item.value) : -1;

                item.checked = !item.checked;

                if (!item.checked) {

                    $scope.selectedlist.splice(i, 1);//remove item if unchecked

                    $scope.checkbox.all = false;//make 'All' to uncheck too

                } else if (item.checked) {

                    $scope.selectedlist.push(item.value);//add item if checked

                }

            };

            //function called when 'All' checkbox is checked
            $scope.selectAll = function() {

                var totalList = $scope.list;

                $scope.selectedlist = [];

                //if selected add all items 
                //if unchecked remove all items from selected list
                angular.forEach(totalList, function(item) {

                    item.checked = $scope.checkbox.all;

                    if (item.checked) {

                        $scope.selectedlist.push(item.value);

                    } else {

                        $scope.selectedlist = [];

                    }

                });

            };


            //always watch my source list if it has been modified and update back..
            $scope.$watch('orginallist', function(value) {

                //sort accordingly..
                value = $filter('orderBy')(value, $scope.sortBy);

                $scope.list = [];

                if (angular.isArray(value)) {

                    angular.forEach(value, function(item) {

                        $scope.list.push({

                            value: item[$scope.value],

                            label: item[$scope.label],

                            checked: item.checked

                        });

                    });

                }

            }, true);


            //clear 'All' checkbox value if all items are de selected
            $scope.$watch('selectedlist', function(value) {

                if (!angular.isArray(value) || (angular.isArray(value) && value.length <= 0)) {

                    $scope.checkbox.all = false;

                }

            }, true);
        }

    };

}]);

Answer 2

您可以创建一个指令，在show more元素后添加show less和ul链接，并根据传递给指令的值进行初始化。看看 JSFiddle 。

<强>指令：

MyApp.directive("showMoreLess", function() {
  return {
    restrict: "A",
    replace: false,
    transclude: true,
    scope: {
      min: "@minValue",
      max: "=maxValue"
    },
    template: '<ng-transclude></ng-transclude><a href="" ng-click="showMore()" ng-show="!isShowMore">... Show More</a><a href="javascript:;" ng-click="showLess()" ng-show="isShowMore">... Show Less </a>',
    link: function(scope, ele, attr) {
      scope.limit = parseInt(scope.min);
    },
    controller: function($scope) {
      $scope.showMore = function() {
        $scope.limit = parseInt($scope.max);
        $scope.isShowMore = true;
      };
      $scope.showLess = function() {
        $scope.limit = parseInt($scope.min);
        $scope.isShowMore = false;
      }
    }
  };
});

<强>模板：

<ul show-more-less min-value="3" max-value="countries.length">
   <h4>By Country</h4>
   <li ng-repeat="country in countries | limitTo:$parent.limit"><!-- Note that we are using $parent.limit since transclude child elements don't have access to transclude element scope -->
    ...
   </li>
<ul>

min-value：初始限制列表为此数字
max-value：要显示的最大列表项数

注意： 我们在过滤器中使用$parent.limit，因为transclude子元素无权访问transclude元素范围。

按钮或链接到多个列表的切换长度

在我的控制器中：

在我看来：

2 个答案: