javascript - tag - Expandir y colapsar con js angular.

title of page html

Question

Estoy tratando de encontrar una manera de expandir y colapsar usando js angulares. No he podido encontrar una manera elegante de hacer esto sin manipular objetos dom en el controlador (que no es la forma angular). Actualmente tengo una buena forma de hacerlo para expandir y contraer una capa. Sin embargo, cuando comienzo a anidar, las cosas se complican y no funcionan como deseo (expandiendo y colapsando varias áreas cuando no deberían). El problema viene cuando no sé cómo enviar un identificador único con un clic de ng para expandir / contraer solo el contenido correcto. Debo mencionar que estos elementos están en una repetición ng, por lo que necesariamente puedo personalizar los parámetros que se envían.

Pude usar este jsfiddle para ayudarme a conseguir que una capa se expanda y colapse para que funcione. Sin embargo, esta es una forma alterna de hacerlo y quiero que el usuario pueda mantener las cosas expandidas mientras expande otras. Entonces, lo que hice para solucionar este problema fue usar una matriz y cada vez que se haga clic en el índice del elemento en el que se hizo clic, se agregará a la matriz y se expandirá la clase. Cuando el usuario volvió a hacer clic, el índice se eliminó de la matriz y el área se colapsó.

Otra forma en que descubrí que puede hacerlo es mediante el uso de directivas. Pero realmente no puedo encontrar ningún ejemplo para comprender cómo funcionan las directivas. No estoy seguro de cómo empezar a escribir directivas.

Mi configuración actual es la siguiente:

function Dexspander($scope) {
    $scope.ExpandArray = [];

    //Push or pop necessary elements for tracking
    $scope.DespopulatArray = function (identifier, element) {
    if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
            $scope.ExpandArray.splice(_.indexOf($scope.ExpandArray, identifier + element), 1);
        } else {
            $scope.ExpandArray.push(identifier + element);
        }
    }

    //Change class of necessary elements
    $scope.Dexspand = function (identifier, element) {
        if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
            return "expand";
        } else {
            return "collapse";
        }
    }
}

<div class="user-header" ng-repeat="user in users">
    <h1 ng-click="DespopulatArray(''user'', $index)">Expand</h1>
</div>
<div class="user-content" ng:class="Dexspand(''user'', $index)">
    <div class="content">
        <div class="user-information">
            <div class="info-header">
                <h1 ng-click="DespopulatArray(''info'', $index)>Some Information</h1>
            </div>
            <div class="info-contents" ng:class="Dexspand(''info'', $index)">
                stuff stuff stuff stuff...
            </div>
        </div>
    </div>
</div>

El problema con esta configuración es que si tengo que expandir los divs primarios y los dos tienen algo debajo que expandir, al hacer clic en el texto expandido los expandiremos en ambas áreas, ya que no son únicos.

Answer 1

El problema viene cuando no sé cómo enviar un identificador único con un clic de ng para expandir / contraer solo el contenido correcto.

Puede pasar $event con ng-click (eventos ng-dblclick y ng-mouse), luego puede determinar qué elemento causó el evento:

<a ng-click="doSomething($event)">do something</a>

Controlador:

$scope.doSomething = function(ev) {
    var element = ev.srcElement ? ev.srcElement : ev.target;
    console.log(element, angular.element(element))
    ...
}

Consulte también http://angular-ui.github.com/bootstrap/#/accordion

Answer 2

Acabo de escribir un simple zippy / contraíble usando Angular usando ng-show, ng-click y ng-init. Se implementa a un nivel, pero se puede expandir a múltiples niveles fácilmente.

Asigne una variable booleana a ng-show y actívela al hacer clic en el encabezado.

Mira here

Answer 3

Aquí una solución simple y fácil en Angular JS usando ng-repeat que podría ayudar.

var app = angular.module(''myapp'', []);

app.controller(''MainCtrl'', function($scope) {

  $scope.arr= [
    {name:"Head1",desc:"Head1Desc"},
    {name:"Head2",desc:"Head2Desc"},
    {name:"Head3",desc:"Head3Desc"},
    {name:"Head4",desc:"Head4Desc"}
    ];
    
    $scope.collapseIt = function(id){
      $scope.collapseId = ($scope.collapseId==id)?-1:id;
    }
});

/* Put your css in here */
li {
  list-style:none;
  padding:5px;
  color:red;
}
div{
  padding:10px;
  background:#ddd;
}

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Simple Collapse</title>
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
  <li ng-repeat=''ret in arr track by $index''>
    <div ng-click="collapseIt($index)">{{ret.name}}</div>
    <div ng-if="collapseId==$index">
      {{ret.desc}}
    </div>
  </li>
</ul>
</body>
</html>

Esto debe cumplir con sus requisitos. Aquí hay un código de trabajo.

Enlace Plunkr http://plnkr.co/edit/n5DZxluYHi8FI3OmzFq2?p=preview

Github: https://github.com/deepakkoirala/SimpleAngularCollapse

Answer 4

En html

button ng-click="myMethod()">Videos</button>

En angular

 $scope.myMethod = function () {
         $(".collapse").collapse(''hide'');    //if you want to hide
         $(".collapse").collapse(''toggle'');  //if you want toggle
         $(".collapse").collapse(''show'');    //if you want to show
}

Answer 5

Puedes resolver esto completamente en el html:

<div>
  <input ng-model=collapse type=checkbox>Title
  <div ng-show=collapse>
     Only shown when checkbox is clicked
  </div>
</div>

Esto también funciona bien con ng-repeat ya que creará un ámbito local para cada miembro.

<table>
  <tbody ng-repeat=''m in members''>
    <tr>
       <td><input type=checkbox ng-model=collapse></td>
       <td>{{m.title}}</td>
    </tr>
    <tr ng-show=collapse>
      <td> </td>
      <td>{{ m.content }}</td>
    </tr>
  </tbody>
</table>

Tenga en cuenta que aunque una repetición tenga su propio alcance, inicialmente heredará el valor del colapso de los súper ámbitos. Esto le permite establecer el valor inicial en un lugar, pero puede ser sorprendente.

Por supuesto, puede cambiar el estilo de la casilla de verificación. Ver http://jsfiddle.net/azD5m/5/

Fiddle actualizado: http://jsfiddle.net/azD5m/374/ original usaba etiquetas de cierre </input> para agregar la etiqueta de texto HTML en lugar de usar <label> .

Answer 6

Ver http://angular-ui.github.io/bootstrap/#/collapse

function CollapseDemoCtrl($scope) {
  $scope.isCollapsed = false;
}



<div ng-controller="CollapseDemoCtrl">
    <button class="btn" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
    <hr>
    <div collapse="isCollapsed">
        <div class="well well-large">Some content</div> 
    </div>
</div>