कोणीय

Question

में एनजी-दोहराने के साथ प्रदान की गई तालिका में पुश पंक्तियां जब मैं पंक्ति पर क्लिक करता हूं तो मैं तालिका में एक अतिरिक्त पंक्ति इनलाइन में धक्का देना चाहता हूं। डेटा को प्रीफेच नहीं किया जाना चाहिए, क्योंकि मुझे उम्मीद है कि वहां अधिकतम 30 पंक्तियां होंगी, लेकिन जहां प्रत्येक पंक्ति ने डेटा को जोड़ा है जो एक प्राप्त करने के लिए अनुचित होगा।

मेरा दृष्टिकोण अब तक मेरे संग्रह को पुन: स्थापित करने और तालिका प्रस्तुत करने के लिए ng-repeat का उपयोग करना है। जब ग्राहक पंक्ति को दबाता है, तो ग्राहक दबाए गए पंक्ति के नीचे पंक्ति के बारे में विवरण को अतिरिक्त पंक्ति के रूप में दिखाए जाने की अपेक्षा करता है।

<tr ng-repeat="court in courts">    
    <td>{{court.name}}</td> 
    <td>{{court.number}}</td> 
    <td>{{court.nrOfPlayers}}</td> 
    <td> 
    <a href ng:click="toggle(court.number)">Details</a> <!-- click toggles extra row with data loaded async --> 
    </td> 
</tr> 
<!-- extra row here --> 

मैं एक hacky रास्ते में एक एनजी शो के साथ तालिका के नीचे विवरण दिखाने में कामयाब रहे, लेकिन वह नहीं है जो मैं चाहता।

आप angular.js के साथ इसे कैसे पूरा करते हैं? ऐसा करने के लिए कोणीय तरीका क्या है?

यहाँ एक बेवकूफ स्क्वैश कोर्ट उदाहरण http://jsfiddle.net/HByEv/

Answer 1

मुझे लगता है कि एक संभव समाधान http://jsfiddle.net/HByEv/2/ हो सकता है।

यदि आप अतिरिक्त <tr ng-show="..."></tr> से छुटकारा पाने के लिए भी "नो प्लेयर्स" संदेश के लिए एक विकल्प है तो पहेली में टिप्पणी की गई है।

संपादित करें:

टिप्पणी में बताया के रूप में AngularJS 1.2+ आप अब ng-repeat-start और ng-repeat-end का उपयोग इस समस्या को हल करने के लिए कर सकते हैं,। http://jsfiddle.net/3yamebfw/ निश्चित रूप से

Answer 2

खैर के साथ एक बेला है। वास्तव में, आपके डिजाइन के साथ मुख्य मुद्दा यह है कि आप एक ही टेबल में हजारों पंक्तियां दिखाना चाहते हैं। यह काम करेगा, लेकिन कुछ ब्राउज़रों (आईई) में प्रस्तुत करना मुश्किल हो सकता है। प्रत्येक पंक्तियों के लिए, आपके पास कुछ बाइंडिंग और प्रत्येक बाध्यकारी व्यूचर होंगे। आपको हमेशा पृष्ठ में बाध्यकारी की मात्रा को कम करने की कोशिश करनी चाहिए। मैं आपको अपने सरणी में एक पेजिनेशन सिस्टम का उपयोग करने का सुझाव देता हूं। Pagination on a list using ng-repeat

यदि आप वास्तव में पंक्तियों को प्रीरेंडर किए बिना जो करना चाहते हैं, तो आपको डोम को संपादित करना होगा, जो टालने योग्य होने पर कोणीय में एक अच्छा अभ्यास नहीं है। मेरे मामले में, मैं एक स्थिर क्षेत्र में पृष्ठ पर कहीं और डेटा रखूंगा। जब मैंने ऐसा कुछ किया, तो मैंने अपने पृष्ठ में एक ट्विटर बूटस्ट्रैप मोडल जोड़ा और जब उपयोगकर्ता ने "अधिक जानकारी" पर क्लिक किया तो चयनित ऑब्जेक्ट की जानकारी के साथ मोडल खोला गया।

Answer 3

एक नमूना

var app = angular.module('test-app', []); 

app.controller('MyController', function($scope, $rootScope, $timeout){ 

    $scope.copy = { 
     p1: ['c1 p1', 'c1 p2'], 
     p3: ['c3 p1', 'c3 p2', 'c3 p3', 'c3 p4', 'c3 p5'] 
    } 

    $scope.courts = [ 
     { 
      "number": 1, 
      "name": "the best court", 
      "nrOfPlayers": 2 
     }, { 
      "number": 2, 
      "name": "the bad court", 
      "nrOfPlayers": 0 
     }, { 
      "number": 3, 
      "name": "the other court", 
      "nrOfPlayers": 5 
     } 
    ]; 

    $scope.loadPlayers = function(court){ 
     //Implement your logic here 
     //Probably using ajax 
     $timeout(function(){ 
      $scope.players = $scope.copy['p' + court.number] || []; 
     }, Math.random() * 2000); 
    } 

    $scope.shouDetails = function(court){ 
     if(court.nrOfPlayers) { 
      delete $scope.players; 
      $scope.loadPlayers(court); 
     } else { 
      $scope.players = []; 
     } 
    } 

}) 

डेमो: Fiddle