web-dev-qa-db-fra.com

Développez et réduisez avec angular js

J'essaie de trouver un moyen de développer et de réduire en utilisant angular js. Je n'ai pas été en mesure de trouver un moyen élégant de le faire sans manipuler des objets dom dans le contrôleur (qui n'est pas la angular). Actuellement, j'ai une belle façon de le faire pour une couche à développer et à réduire. Cependant, lorsque je commence l'imbrication, les choses se compliquent et ne fonctionnent pas comme je le fais. voulez-le (développer et réduire plusieurs zones alors qu'elles ne devraient pas l'être). Le problème vient de moi ne sachant pas comment envoyer un identifiant unique avec un ng-clic pour développer/réduire uniquement le bon contenu. Je dois mentionner que ces les éléments sont dans une répétition ng afin que je puisse nécessairement personnaliser les paramètres envoyés.

J'ai pu utiliser cela jsfiddle pour m'aider à développer et à réduire une couche pour qu'elle fonctionne. Cependant, c'est une façon de le faire et je veux que l'utilisateur puisse continuer à développer les choses tout en développant les autres. Donc, ce que j'ai fait pour résoudre ce problème était d'utiliser un tableau de et chaque fois que quelque chose est cliqué, l'index de cet élément cliqué était ajouté au tableau et la classe développée. Lorsque l'utilisateur a cliqué à nouveau, l'index a été supprimé du tableau et la zone a été réduite.

Une autre façon de constater que vous pouvez le faire est d'utiliser des directives. Mais je ne peux pas vraiment trouver d'exemple pour comprendre comment fonctionnent les directives. Je ne sais même pas par où commencer quand il s'agit d'écrire des directives.

Ma configuration actuelle est la suivante:

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>

Le problème avec cette configuration est que si je dois développer des divs parent et que les deux ont quelque chose en dessous à développer, cliquer sur le texte développé les développera dans les deux domaines car ils ne sont pas uniques.

javascriptexpandcollapseangularjs
22
yaegerbomb

Le problème vient de moi ne sachant pas comment envoyer un identifiant unique avec un ng-clic pour développer/réduire uniquement le bon contenu.

Tu peux passer $event avec ng-click (ng-dblclick et ng- mouse events), vous pouvez alors déterminer quel élément a provoqué l'événement:

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

Manette:

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

Voir aussi http://angular-ui.github.com/bootstrap/#/accordion

16
Mark Rajcok

Vous pouvez résoudre ce problème entièrement en html:

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

Cela fonctionne également bien avec ng-repeat car il créera une portée locale pour chaque membre.

<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>

Sachez que même si une répétition a sa propre portée, elle héritera initialement de la valeur de l'effondrement des super étendues. Cela vous permet de définir la valeur initiale à un endroit, mais cela peut être surprenant.

Vous pouvez bien sûr reformuler la case à cocher. Voir http://jsfiddle.net/azD5m/5/

Violon mis à jour: http://jsfiddle.net/azD5m/374/ Violon d'origine utilisé fermeture </input> balises pour ajouter l'étiquette de texte HTML au lieu d'utiliser <label> Mots clés.

27
Peter Kriens

Voir 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>
7
Crystal Gardner

Je viens d'écrire un simple zippy/pliable en utilisant Angular en utilisant ng-show, ng-click et ng-init. Son implémentation à un niveau mais peut être étendue à plusieurs niveaux facilement.

Attribuez une variable booléenne à ng-show et basculez-la en cliquant sur l'en-tête.

Vérifiez-le ici enter image description here

3
Allzhere

Voici une solution simple et facile sur Angular JS utilisant ng-repeat qui pourrait aider.

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>

Cela devrait répondre à vos besoins. Voici un code de travail.

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

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

2
ideeps