Question

我对“类别”及其下属列表的外观有疑问。

加载页面时不应显示列表。因此只有通过单击用户才能看到。不幸的是，只要选中一个复选框，这些列表项就会立即消失。这不应该发生。 “类别”下的内容只有在单击“类别”时才会消失或显示。

我必须做出哪些改变才能使我的工作像我想象的那样？

以下是容器的HTML：

<div class="cd-filter-block" value="Show Hide Elements" data-ng-click="ShowHideCategory()" >
    <h4 >Kategorien</h4>

    <ul class="cd-filter-content cd-filters list" ng-show="IsVisibleCategory">
        <li>
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Rind" data-ng-false-value="">
            <label class="checkbox-label"> Rind </label> 
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Geflügel" data-ng-false-value="">
            <label class="checkbox-label">Geflügel</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Schwein" data-ng-false-value="">
            <label class="checkbox-label">Schwein</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Schaf" data-ng-false-value="">
            <label class="checkbox-label">Schaf</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Wild" data-ng-false-value="">
            <label class="checkbox-label">Wild</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Ziege" data-ng-false-value="">
            <label class="checkbox-label">Ziege</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Pferd" data-ng-false-value="">
            <label class="checkbox-label">Pferd</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Alpaka" data-ng-false-value="">
            <label class="checkbox-label">Alpaka</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Fisch" data-ng-false-value="">
            <label class="checkbox-label">Fisch</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Kaninchen" data-ng-false-value="">
            <label class="checkbox-label">Kaninchen</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Mineral" data-ng-false-value="">
            <label class="checkbox-label">Mineralfutter</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Einzel" data-ng-false-value="">
            <label class="checkbox-label">Einzelfutter</label>
        </li>
        <li>                        
            <input class="filter" type="checkbox" ng-model="search.definition" ng-true-value="Spezial" data-ng-false-value="">
            <label class="checkbox-label">Spezialfutter</label>
        </li>
        <li class="reset">
            <p><strong><a href="" data-ng-click="resetFilters()" class="show-all"><i class="fa fa-undo" aria-hidden="true"></i> Filter zurücksetzen</a></strong></p>
        </li>                   
    </ul> <!-- cd-filter-content -->
</div> <!-- cd-filter-block -->

以下是脚本文件的摘录：

app.controller('PageCtrl', ['$scope', 'filterFilter', '$http', function ($scope, filterFilter, $http) { 
$scope.items =[];

$http.get("document.json").success(function(response){ 
    $scope.items = response;  //ajax request to fetch data into $scope.data
// pagination controls
    $scope.currentPage = 1;
    $scope.totalItems = $scope.items.length;
    $scope.entryLimit = 200; // items per page
    $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
    $scope.orderByField = 'evaluation_result';
    $scope.reverseSort = true;
    $scope.IsVisibleCategory = false;
    &scope.IsVisibleSubCategory = false;
    &scope.IsVisibleComposition = false;
    &scope.IsVisibleAnteile = false;
    $scope.ShowHideCategory = function () {
    //If DIV is visible it will be hidden and vice versa.
        $scope.IsVisibleCategory = $scope.IsVisibleCategory ? false : true;
    };
    $scope.ShowHideSubcategory = function () {
    //If DIV is visible it will be hidden and vice versa.
        $scope.IsVisibleSubcategory = $scope.IsVisibleSubcategory ? false : true;
    };
    $scope.ShowHideComposition = function () {
    //If DIV is visible it will be hidden and vice versa.
        $scope.IsVisibleComposition = $scope.IsVisibleComposition ? false : true;
    };
    $scope.ShowHideAnteile = function () {
    //If DIV is visible it will be hidden and vice versa.
        $scope.IsVisibleAnteile = $scope.IsVisibleAnteile ? false : true;
    };
});

Answer 1

这里的问题是，您在包含div上设置ng-click。所以每次点击一个孩子，都会触发ShowHideCategory（）函数。

尝试将点击处理程序移动到实际的单词：

<div class="cd-filter-block" value="Show Hide Elements">
  <h4 data-ng-click="ShowHideCategory()">Kategorien</h4>
  [...]

旁注，与您的问题无关

在ShowHide功能中，您可以稍微优化一下代码：

$scope.IsVisibleCategory = !$scope.IsVisibleCategory;

Angularjs / HTML显示和隐藏li元素onClick

1 个答案: