Развернуть и свернуть с помощью angular js

Я пытаюсь выяснить способ развернуть и свернуть с помощью angular js. Я не смог найти элегантный способ сделать это, не манипулируя объектами dom в контроллере (что не является способом angular). В настоящее время у меня есть хороший способ сделать это, чтобы один слой расширялся и рушился. Однако, когда я начинаю вложенность, все становится сложным и не работает так, как я хочу (расширяя и сворачивая несколько областей, когда их не должно быть). Проблема заключается в том, что я не знаю, как отправить уникальный идентификатор с помощью ng-click, чтобы только развернуть/свернуть правильное содержимое. Я должен упомянуть, что эти элементы находятся в ng-repeat, поэтому я могу настроить параметры отправки.

Я смог использовать этот jsfiddle, чтобы помочь мне разобраться и свернуть один слой на работу. Однако это способ переключиться на это, и я хочу, чтобы пользователь мог держать вещи в процессе расширения других. Итак, что я сделал, чтобы исправить это, был использован массив, и каждый раз, когда что-то нажимается, индекс этого щелкнутого элемента будет добавлен в массив, а класс расширен. Когда пользователь снова щелкнул, индекс был удален из массива, и область была свернута.

Другим способом я нашел, что вы можете это сделать, используя директивы. Но я не могу найти какой-либо пример, чтобы обернуть голову тем, как работают директивы. Я не уверен, как начать, когда дело доходит до написания директив.

Моя текущая настройка такова:

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>

Проблема с этой настройкой заключается в том, что если у меня есть родительские divs, и у них есть что-то под ними, чтобы развернуть, щелчок по раскрывающемуся тексту расширит их в обеих областях, поскольку они не уникальны.

Ответы

Ответ 1

Проблема заключается в том, что я не знаю, как отправить уникальный идентификатор с помощью ng-click, чтобы только развернуть/свернуть правильный контент.

Вы можете передать $event с помощью ng-click (ng-dblclick и ng-mouse events), затем вы можете определить, какой элемент вызвал событие:

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

Контроллер:

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

См. также http://angular-ui.github.com/bootstrap/#/accordion

Ответ 2

Вы можете полностью решить это в html:

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

Это также хорошо работает с ng-repeat, поскольку оно создаст локальную область для каждого члена.

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

Имейте в виду, что даже если повторение имеет свою собственную область, изначально он наследует значение от краха из суперполей. Это позволяет вам установить начальное значение в одном месте, но это может быть удивительно.

Вы можете, конечно, переустановить флажок. См. http://jsfiddle.net/azD5m/5/

Обновлен скрипт: http://jsfiddle.net/azD5m/374/ Исходная скрипта использовала закрытие тегов </input> для добавления текстовой метки HTML вместо тегов <label>.

Ответ 3

См. 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>

Ответ 4

Я просто написал простой zippy/collapsable с помощью Angular, используя ng-show, ng-click и ng-init. Он реализован на одном уровне, но может быть легко расширен до нескольких уровней.

Назначьте логическую переменную ng-show и переключите ее при щелчке заголовка.

Отметьте here

Ответ 5

Здесь простое и простое решение на Angular JS с использованием ng-repeat, которое может помочь.

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>

Ответ 6

В html

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

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