कोणीय जेएस

Question

के साथ विस्तार और पतन करें मैं कोणीय जेएस का उपयोग करके विस्तार और पतन करने का एक तरीका जानने का प्रयास कर रहा हूं। मैं नियंत्रक में डोम ऑब्जेक्ट्स को मैनिपुलेट किए बिना ऐसा करने का एक शानदार तरीका नहीं ढूंढ पाया (जो कोणीय तरीका नहीं है)। वर्तमान में मेरे पास एक परत विस्तार और पतन के लिए ऐसा करने का एक अच्छा तरीका है। हालांकि जब मैं घोंसले शुरू करता हूं, चीजें जटिल हो जाती हैं और जिस तरीके से मैं इसे चाहता हूं, उस पर काम नहीं करता (जब वे नहीं होने चाहिए तो कई क्षेत्रों का विस्तार और ढहना)। समस्या यह नहीं है कि मुझे सही सामग्री को विस्तार/संक्षिप्त करने के लिए एनजी-क्लिक के साथ एक अद्वितीय पहचानकर्ता को कैसे भेजना है। मुझे जिक्र करना चाहिए कि ये आइटम एनजी-दोहराने में हैं इसलिए मैं आवश्यक रूप से भेजे गए पैरामीटर को कस्टमाइज़ कर सकता हूं।

मैं एक परत विस्तार और काम पर पतन पाने में मेरी सहायता के लिए इस 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 करने के लिए है का विस्तार किया और उन दोनों उनके अधीन कुछ विस्तार करने के लिए है, का विस्तार पाठ में उन्हें विस्तार होगा पर क्लिक है दोनों क्षेत्रों के रूप में वे अद्वितीय नहीं हैं।

Answer 1

समस्या यह नहीं है कि मुझे सही सामग्री का विस्तार/संक्षिप्त करने के लिए एक एनजी-क्लिक के साथ एक अद्वितीय पहचानकर्ता कैसे भेजना है, यह समस्या नहीं आती है।

आप एनजी-क्लिक के साथ $event पारित कर सकते हैं (एनजी-dblclick, और ng- माउस घटनाओं), तो आप तय कर सकें तत्व घटना का कारण:

<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

Answer 2

मैंने एनजी-शो, एनजी-क्लिक और एनजी-इनिट का उपयोग करके कोणीय का उपयोग करके एक साधारण ज़िप्पी/ढहने योग्य लिखा है। इसे एक स्तर पर लागू किया गया लेकिन इसे आसानी से कई स्तरों तक बढ़ाया जा सकता है।

एक बुलियन वैरिएबल को एनजी-शो में असाइन करें और हेडर के क्लिक पर इसे टॉगल करें।

इसे बाहर here

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

Answer 4

आप पूरी तरह से html में इस हल कर सकते हैं देखें:

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

यह भी है क्योंकि यह होगा एनजी-दोहराने के साथ अच्छी तरह से काम प्रत्येक सदस्य के लिए एक स्थानीय दायरा बनाएँ।

<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> टैग को बंद करने <label> टैग का उपयोग करने के बजाय HTML पाठ लेबल जोड़ने के लिए इस्तेमाल किया।

Answer 5

यहां एनजी-दोहराने का उपयोग करके कोणीय जेएस पर एक सरल और आसान समाधान है जो मदद कर सकता है।

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

Answer 6

एचटीएमएल में

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 
}