Question

在我的项目中，我有大约50个区域名称，其中servicenames为5列中的子菜单，它们来自动态数据库，我需要在areaname的每个顶部都有一个+符号，当我点击特定div（区域）的符号时必须显示带有列的子菜单，如果我点击 - 必须隐藏特定div（区域）的符号。任何人都可以帮助我实现这一目标。提前谢谢。

我的HTML：

<div ng-repeat="area in areas">
            <div class="row">
                <div class="col-md-12">
                    <div class="row row-head">
                        <div class="col-md-6 col-xs-6">
                            {{area.areaname}}
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 col-xs-4"></div>
                        <div class="col-md-8 col-xs-8">
                            <div class="row">
                                <div class="col-md-2 col-xs-2 headings"></div>
                                <div class="col-md-2 col-xs-2 headings">column1</div>
                                <div class="col-md-2 col-xs-2 headings">column2</div>
                                <div class="col-md-2 col-xs-2 headings">column3</div>
                                <div class="col-md-2 col-xs-2 headings">column4</div>
                                <div class="col-md-2 col-xs-2 headings">column5</div>
                            </div>
                        </div>
                    </div>

                    <div class="row item-head" ng-repeat="item in area track by $index">
                        <div class="col-md-4 col-xs-4 check-box"><input type="checkbox" ng-model="check">
                           {{item.servicename}}
                        </div>
                        <div class="col-md-8 col-xs-8 service-data">
                            <div class="row">
                                <div class="col-md-2 col-xs-2"></div>
                                <div class="col-md-2 col-xs-2">
                                    <input type="text" class="form-data" ng-disabled="!check">
                                </div>
                                <div class="col-md-2 col-xs-2">
                                    <input type="text" class="form-data" ng-disabled="!check">
                                </div>
                                <div class="col-md-2 col-xs-2">
                                    <input type="text" class="form-data" ng-disabled="!check" ng-readonly="true">
                                </div>
                                <div class="col-md-2 col-xs-2">
                                    <input type="text" class="form-data" ng-disabled="!check" ng-readonly="true">
                                </div>
                                <div class="col-md-2 col-xs-2">
                                    <input type="text" class="form-data" ng-disabled="!check" ng-readonly="true">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

您可以切换类并相应地显示/隐藏子列表。像这样：

var data = {
  "Area1": ["service 1", "service 2"],
  "Area2": ["service 12", "service 22"]
};
angular.module("myApp", [])
  .controller("mycon", ["$scope",
    function($scope) {
      $scope.data = data;
      $scope.toggle = function($event) {
        angular.element($event.currentTarget).toggleClass("hide")
      }
    }
  ])

.head {
  height: 150px;
}
.hide > ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="mycon">
    <div class="head" ng-click="toggle($event)" ng-repeat="(index,value) in data">
      {{index}}
      <ul>
        <li ng-repeat="v in value">
          {{v}}
        </li>
      </ul>
    </div>
  </div>
</div>

**由于CSS，它可能看起来不太好。您可以添加哪个。：）

使用angularjs进行动态div扩展

1 个答案: