Ng-Repeat Collapse 只显示第一个元素

Question

我正在尝试对 ng-repeat 项目列表使用折叠。但它只显示列表的第一个元素。我怎样才能让它显示所有元素？

menuVertical.directive.js

(function () {
    'use strict';
    angular
        .module("academico")
        .directive("menuVertical", menuVertical);

    function menuVertical() {
        return {
            restrict: 'E',
            templateUrl: "components/ui/menuVertical/menuVertical.html?v="+ globalgsvapp,
            scope:{
                datos: '@',
                clickOn: '&',
            },
            link: function(scope, elem, attrs){
                scope.form = {};
                scope.form.datos = '';
                if (scope.datos) { // cambiar el texto de Resultados
                    scope.form.datos = JSON.parse(scope.datos);
                }     
            }
        }
    }
})();

menuVertical.html

<div ng-repeat="f in form.datos track by $index">
  <a href="{{f.href}}" class="list-group-item" 
    id="datos_estmenu" 
    style="background-color: #2b3e50; color: #FFFFFF;" 
    data-toggle="collapse" 
    data-target="#{{f.id}}" 
    data-parent="#sidebar" >
    <i class="{{f.icono}}" >&nbsp;&nbsp;</i>{{f.titulo}}
    <i class="fa fa-caret-down pull-right"></i>
  </a>
  <div id="{{f.id}}" ng-repeat="f1 in f.submenu track by $index"  >
    <a href="" data-toggle="tooltip"  
      data-placement="right" class="list-group-item"  
      ng-click="self.limpiaSes(); self.newPass()">{{f1.tit_submenu}}
      <i class="fa fa-angle-right pull-right"></i>
    </a>
  </div>
</div>

controller.js

self.datos=[
    {
        "titulo": "Información",
        "icono": "fa fa-book",
        "href":'#datos_dece',
        "id":'datos_dece',
        "submenu": [
            {
                "tit_submenu": "Cambiar contraseña",
                "click":"self.newPass()"
            }
        ]
    },
    {
        "titulo": "Consulta de Datos",
        "icono": "fa fa-book",
        "href":'#datos',
        "id":'datos',
        "submenu": [
            {
                "tit_submenu": "Ficha de Datos",
                "click":"self.ficha_datos()"
            },
            {
                "tit_submenu": "Consulta Personalizada",
                "click":"self.ficha_datos_personali()"
            }
        ]
    },
    {
        "titulo": "Consulta de Horarios",
        "icono": "fa fa-list",
        "href":'#consulta_horarios',
        "id":'consulta_horarios',
        "submenu": [
            {
                "tit_submenu": "Por Materia",
                "click":"self.notas_materia()"
             },
             {
                 "tit_submenu": "Por Curso",
                 "click":"self.notas_curso()"
             }
         ]
     },
     {
         "titulo": "Consulta de Notas",
         "icono": "fa fa-list",
         "href":'#consulta_notas',
         "id":'consulta_notas',
         "submenu": [
             {
                 "tit_submenu": "Por Docente",
                 "click":"self.horario_docente()"
             },
            {
                "tit_submenu": "Por Curso",
                "click":"self.horario_curso()"
             }
        ]
    },
    {
        "titulo": "Eventos",
        "icono": "fa fa-calendar",
        "href":'#eventos',
        "id":'eventos',
        "submenu": [
            {
                "tit_submenu": "Revisar Eventos",
                "click":"self.getAgenda()"
            },
            {
                "tit_submenu": "Ingresar Eventos",
                "click":"self.formAgenda()"
            }
        ]
    },
    {
        "titulo": "Cartelera",
        "icono": "fa fa-globe",
        "href":'#cartelera',
        "id":'cartelera',
        "submenu": [
            {
                "tit_submenu": "Cartelera Principal",
                "click":"self.getCartelera()"
            }
        ]
    },
    {
        "titulo": "Salir",
        "icono": "fa fa-sign-out",
        "href":'#',
        "id":'',
        "submenu": [
            {
                "tit_submenu": "",
                "click":"self.self.salir()"
            }
        ]
    }
];

Answer 1

您使用了错误的作用域变量 "form.datos"。如果您的控制器包含 $scope.datos 那么在 ng-repeat 中您可以像下面这样使用：

<div ng-repeat="f in datos track by $index">

另外别忘了加上ng-controller.

所以，总结是：

In controller: replace self.datos to $scope.datos

in HTML change: form.datos to datos <div ng-repeat="f in datos track by $index">

In HTML add controller :

<div ng-controller = "YourController" ></div>`
   <div ng-repeat="f in datos track by $index"></div>`
</div>

Ng-Repeat Collapse 只显示第一个元素

Ng-Repeat Collapse Only Shows First Element

angularjs

angular-directive