Question

我一直在努力解决这一挑战两天但没有成功。我使用bootstrap和AngularJS实现了以下面板框（整个内容都在控制器内）

<div id="menu2a">
  <div class="panel list-group">
    <div class="list-group-item"><b>Panel Title</b></div>
    <div class="panel-body" data-toggle = "collapse" data-target = '#1' 
         title = "click for more information">
      <span
            class="glyphicon glyphicon-chevron-down pull-right"></span>			
      <ul>
        <li data-ng-repeat="element in UnknownSizeArray">
          <i>{{$index + 1}}) {{element}}</i>
        </li>

      </ul>							
      <div style = "padding-left:40px" id="1" class = "collapse">
        <br>
        <p> More information here..</p>
      </div>

    </div>

  </div>
</div>

UnknownSizeArray是我需要显示的内容，由Angular控制器发送到html页面。

我的问题如下：

我希望collapse功能取决于内容量（比如上面5个数组元素，我会在可折叠框中显示其余内容。
当可折叠性消失时，V形符号必须消失
对于3-5个元素，我希望更改panel-body（框内容）的高度，以便在没有折叠功能的情况下容纳更多数据。

我如何实现这些目标？

我在javascript文件中尝试了jQuery的.css()和.attr()函数，在data-ng-init = "test()" ...部分调用<div class="panel-body"后没有成功。这里有一个我尝试的例子（.css的相同想法也没有用）：

$scope.test = function() {
  var array = $scope.UnknownSizeArray;

  if (array.length > 5) {
    $(".panel-body").attr("data-toggle","collapse");
  };
};

任何想法为什么它不起作用或什么应该是正确的方法？

Answer 1

您是否尝试过addclass（），removeClass（）或toggleClass（）？那些可以做到这一点。

<div class="panel-body collapse">
     title = "click for more information">
  <span
        class="glyphicon glyphicon-chevron-down pull-right"></span>         
  <ul>
    <li data-ng-repeat="element in UnknownSizeArray">
      <i>{{$index + 1}}) {{element}}</i>
    </li>

  </ul>                         
  <div style = "padding-left:40px" id="1" class="collapse">
    <br>
    <p> More information here..</p>
  </div>

</div>

<!-- Angular script // Inside of it module -->
$scope.test = function() {
var array = $scope.UnknownSizeArray;

  if (array.length > 5) {

    $(".panel-body").addClass(".collapse");

  } else {
    // maybe the array changes and you want to go trough this function again
    $(".panel-body").removeClass(".collapse");
  }
};

另外，请注意html中的间距，如第4行所示。如果原始代码是这样的（它发生）可能这就是jQuery无法检测和修改此元素的原因。 ;）

4   <div class="panel-body" data-toggle = "collapse" data-target = '#1'

Answer 2

也许，你会尝试这个jsfiddle。

var myApp = angular.module("myApp", []);


myApp.controller("myCtrl", function($scope) {
  $scope.UnknownSizeArray = [];
  $scope.limit = 5;
  for (var i = 0; i < 100; i++) {
    $scope.UnknownSizeArray.push(i);
  }
  $scope.expandAll = function(){
   $scope.limit = $scope.UnknownSizeArray.length;
  }
   $scope.expandNext5 = function(){
   $scope.limit += 5;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <div id="menu2a">
    <div class="panel list-group">
      <div class="list-group-item"><b>Panel Title</b></div>
      <div class="panel-body" data-toggle="collapse" data-target='#1' title="click for more information">
        <span class="glyphicon glyphicon-chevron-down pull-right"></span>
        <ul>
          <li data-ng-repeat="element in UnknownSizeArray|limitTo:limit">
            <i>{{$index + 1}}) {{element}}</i>
          </li>

        </ul>
        <div ng-if="limit<UnknownSizeArray.length">
          <br>
          <button ng-click="expandAll()"> Expand all</button>
          <button ng-click="expandNext5()"> Expand next 5</button>
        </div>

      </div>

    </div>
  </div>
</body>

在页面加载时根据内容更改元素的外观和功能（AngularJS）

2 个答案: