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

【问题标题】：Changing element's look and functionality based on its content while page loads (AngularJS)在页面加载时根据其内容更改元素的外观和功能（AngularJS）
【发布时间】：2016-02-14 23:44:21
【问题描述】：

我已经尝试了两天来应对这个挑战，但没有成功。我使用 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 个数组元素，我将在可折叠框中显示其余元素。
当可折叠性消失时，人字形标志符号必须消失
对于 3-5 个元素，我希望更改 panel-body（框内容）的高度，以便在没有折叠功能的情况下在其中容纳更多数据。

我如何实现这些？

在从<div class="panel-body"... 部分调用data-ng-init = "test()" 后，我在我的javascript 文件上尝试了jQuery 的.css() 和.attr() 函数，但没有成功。这是我尝试过的一个示例（对于 .css 的相同想法也不起作用）：

$scope.test = function() {
  var array = $scope.UnknownSizeArray;

  if (array.length > 5) {
    $(".panel-body").attr("data-toggle","collapse");
  };
};

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

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案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'

【讨论】：

【解决方案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>

【讨论】：