Question

我有一组颜色ID和代码，我在<li>标记中使用ng-repeat来显示所有颜色，但是我只想显示 colorCode <10 并隐藏具有 colorCode> 10 的颜色，我有一个“ +”按钮，此按钮的onClick我要显示隐藏的颜色，并且按钮显示“-”图标，然后再次单击按钮隐藏 ColorCode> 10 的颜色。这是我的代码：

<div class="row py-3 border_bootom_1">
                    <div class="col-lg-2 align-self-center">
                        <h4 class="card-title"> Color </h4>
                    </div>
                    <div class="col-lg-10 align-self-center">
                        <ul class="ss_size_general ss_size_general_1">
                            <li class="pointer" ng-repeat="color in $ctrl.parameters.colors">
                                <a href="#"
                                   ng-class="{'active': $ctrl.search.colors.indexOf(color.code.toString()) >= 0, 'colorOpen-content': color.code > 10}"                                  
                                   ng-click="$ctrl.setParameter('colors', color.code.toString())" title="{{color.name}}">
                                    <div class="verticle_center"><span>{{color.label}}</span></div>
                                </a>
                            </li>
                            <li>
                                <a><div class="verticle_center pointer colorbtn"><i class="fa fa-plus"></i></div></a>
                            </li>
                        </ul>
                    </div>
                </div>


$('.colorbtn').click(function () {
    $('.colorOpen-content').toggle(200);

    var child = $(this).children();
    if (child.hasClass('fa fa-plus'))
        child.removeClass('fa fa-plus').addClass('fa fa-minus');
    else
        child.removeClass('fa fa-minus').addClass('fa fa-plus');

    return false;
});`

Answer 1

尝试一下

`

<div ng-class="{'active': $ctrl.search.colors.indexOf(color.code.toString()) >= 0}"
ng-style="{{color.code}} >= 10 ? {'display': 'hide !important'} : {'display': 'block !important'}"></div>

`

Answer 2

对于这个问题，您也可以使用filter。像这样：

var app = angular.module("app", []);

app.controller("MainCtrl", function($scope) {
  $scope.lt10 = true;
  $scope.colors = [{
      code: 1,
      name: 'red',
      label: 'Red'
    },
    {
      code: 2,
      name: 'blue',
      label: 'Blue'
    },
    {
      code: 30,
      name: 'green',
      label: 'Green'
    },
    {
      code: 40,
      name: 'yellow',
      label: 'Yellow'
    }
  ];


  $scope.toggleShow = function() {
    $scope.lt10 = !$scope.lt10;
  };

  $scope.setParameter = function() {

  };

  $scope.myFilter = function(itm) {
    if ($scope.lt10 && itm.code < 10) return true;
    if (!$scope.lt10 && itm.code >= 10) return true;
    return false;
  };

});

<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div class="row py-3 border_bootom_1">
    <div class="col-lg-2 align-self-center">
      <h4 class="card-title"> Color </h4>
    </div>
    <div class="col-lg-10 align-self-center">
      <ul class="ss_size_general ss_size_general_1">
        <li class="pointer" ng-repeat="color in colors|filter: myFilter">
          <a href="#" ng-class="{'active': $ctrl.search.colors.indexOf(color.code.toString()) >= 0, 'colorOpen-content': color.code > 10}" ng-click="setParameter('colors', color.code.toString())" title="{{color.name}}">
            <div class="verticle_center"><span>{{color.label}}</span></div>
          </a>
        </li>
        <li>
          <a>
            <div ng-click="toggleShow()" ng-show="lt10" class="verticle_center pointer colorbtn">+ PLUS +</div>
            <div ng-click="toggleShow()" ng-show="!lt10" class="verticle_center pointer colorbtn">- MINUS -</div>
          </a>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>

用ng-repeat和condition隐藏和显示<li>

2 个答案: