Rozwiń i zwiń z kątowym js

Question

Próbuję znaleźć sposób na rozwinięcie i zwinięcie za pomocą kątowego js. Nie byłem w stanie znaleźć eleganckiego sposobu na to, bez manipulowania obiektami domowymi w kontrolerze (co nie jest kanciastą drogą). Obecnie mam dobry sposób na zrobienie tego w przypadku rozwijania i zwijania jednej warstwy. Jednak kiedy zaczynam zagnieżdżać, rzeczy stają się skomplikowane i nie działają tak, jak tego chcę (rozwijanie i zwijanie wielu obszarów, gdy nie powinny być). Problem polega na tym, że nie wiem, jak wysłać unikalny identyfikator za pomocą ng-click, aby rozwinąć/zwinąć właściwą treść. Powinienem wspomnieć, że te elementy są w powtórzeniu ng, więc mogę koniecznie dostosować parametry przesyłane.

Udało mi się użyć tego jsfiddle, aby pomóc mi rozwinąć i zwinąć jedną warstwę do pracy. Jest to jednak sposób przełączania i chcę, aby użytkownik mógł zachować to, co rozszerzone, a jednocześnie rozszerzyć inne. Więc to, co zrobiłem, aby to naprawić, to użycie tablicy i za każdym razem, gdy coś zostanie kliknięte, indeks tego klikniętego elementu zostanie dodany do tablicy, a klasa rozwinięta. Gdy użytkownik kliknął ponownie, indeks został usunięty z tablicy, a obszar został zwinięty.

Innym sposobem okazało się, że można to zrobić za pomocą dyrektyw. Ale tak naprawdę nie mogę znaleźć żadnego przykładu, który pozwoliłby mi zrozumieć, jak działają dyrektywy. Nie wiem, jak zacząć, jeśli chodzi o pisanie dyrektyw.

Mój obecny zestaw up to:

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> 

Problem z tej konfiguracji jest to, że jeśli mam div dominujących rozszerzona i te obie mają coś pod nimi, aby rozwinąć, klikając poszerzyć tekst rozszerzy je w oba obszary, ponieważ nie są unikalne.

Answer 1

Problem polega na tym, że nie wiem, jak wysłać unikalny identyfikator za pomocą ng-click, aby rozwinąć/zwinąć właściwą treść.

można przekazać $event z ng-click (NG-dblclick i ng-zdarzenia myszy), a następnie można określić, który element spowodował zdarzenie:

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

Kontroler:

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

---

Zobacz także http://angular-ui.github.com/bootstrap/#/accordion

Answer 2

Właśnie napisałem prosty zippy/zwijany za pomocą Angulara przy użyciu ng-show, ng-click i ng-init. Jest zaimplementowany na jednym poziomie, ale można go łatwo rozszerzyć do wielu poziomów.

Przypisz zmienną binarną do ng-show i przełącz ją na kliknięcie nagłówka.

Sprawdź to here

Answer 3

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

Answer 4

Można rozwiązać ten pełni w html:

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

To również działa dobrze z NG-repeat ponieważ będzie utwórz zakres lokalny dla każdego członka.

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

Należy pamiętać, że chociaż powtórzenie ma własny zakres, początkowo będzie dziedziczyć wartość z upadkiem z Super zakresów. Pozwala to ustawić wartość początkową w jednym miejscu, ale może być zaskakujące.

Oczywiście można ponownie ustawić pole wyboru. Zobacz http://jsfiddle.net/azD5m/5/

Aktualizacja skrzypce:http://jsfiddle.net/azD5m/374/ Original skrzypce stosowane zamknięcia </input> tagów dodać etykietę tekstową HTML zamiast używać <label> tagi.

Answer 5

Oto proste i łatwe rozwiązanie w przypadku Angular JS przy użyciu polecenia ng-repeat, które może pomóc.

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="angular.js@1.5.x" 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>

ta powinna spełnić swoje wymagania. Oto działający kod.

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

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

Answer 6

W html

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

W kątowe

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