AngularJS로 확장 및 축소

AngularJS로 확장 및 축소

AngularJS를 이용하여 확장과 축소를 할 수 있는 방법을 찾고 있습니다.컨트롤러의 DOM 개체를 조작하지 않고는 이를 수행할 수 있는 우아한 방법을 찾을 수 없었습니다(각도 방식이 아님).

현재 저는 한 층 확장 및 붕괴를 위한 좋은 방법을 가지고 있습니다.하지만 둥지를 틀기 시작하면 일이 복잡해지고 원하는 대로 작동하지 않습니다(여러 영역이 확장되고 여러 영역이 무너지면 안 됩니다).

문제는 ng클릭으로 고유 식별자를 보내는 방법을 몰라 올바른 콘텐츠만 확장/축소하는 것입니다.나는 이 아이템들이 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>

이 설정의 문제는 확장된 디브를 부모해야 하는데 둘 다 확장할 수 있는 무언가가 있다면 확장 텍스트를 클릭하면 고유하지 않기 때문에 두 영역에서 확장 텍스트가 확장됩니다.

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/ 참조

업데이트된 fiddle: http://jsfiddle.net/azD5m/374/ 원래 fiddle에서 클로징을 사용했습니다.</input>태그를 사용하는 대신 HTML 텍스트 레이블을 추가합니다.<label>꼬리표를 붙이기

문제는 ng클릭으로 고유 식별자를 보내는 방법을 몰라 올바른 콘텐츠만 확장/축소하는 것입니다.

통과가능합니다$eventng-click(ng-dblclick, ng-mouse 이벤트)을 사용하면 어떤 요소가 이벤트를 유발했는지 확인할 수 있습니다.

<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

http://angular-ui.github.io/bootstrap/ #/ 참조

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>

방금 ng-show, ng-click, ng-init을 사용하여 Angular를 사용하여 간단한 zipy/collapsable을 작성했습니다.한 단계로 구현되지만 여러 단계로 쉽게 확장할 수 있습니다.

부울 변수를 ng-show에 할당하고 헤더 클릭 시 전환합니다.

여기서 확인해보세요.

여기서 ng-repeat을 사용하는 Angular JS의 간단하고 쉬운 해결책이 도움이 될 것입니다.

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>

이것은 당신의 요구사항을 충족시켜 줄 것입니다.여기 작동 코드가 있습니다.

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

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

html로

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

각지지 않은

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

언급URL : https://stackoverflow.com/questions/12603425/expand-and-collapse-with-angularjs