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

我已经尝试了两天来应对这个挑战，但没有成功。我有以下面板框使用引导程序和 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的高度(框内容(，以便在没有折叠功能的情况下容纳更多数据。

我如何实现这些目标？

在从<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");
  };
};

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

你有没有尝试过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'

也许，你会尝试这个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>

相关内容

最新更新

热门标签：