2014-06-06 3 views
9

मैं अपने रेल ऐप पर ngTable directive लागू करने का प्रयास कर रहा हूं, लेकिन यह सही नहीं हो सकता है। मैं अभी भी कोणीय में एक नया हूँ और यह निर्देश बहुत खराब दस्तावेज लगता है (हालांकि अच्छे उदाहरणों की एक महान विविधता है)।AJAX डेटा स्रोत के साथ Angularjs ng-table, सॉर्टिंग और फ़िल्टरिंग

तो मैं $scope.users कहा जाता है एक सरणी सभी उपयोगकर्ताओं की जानकारी की आवश्यकता (जैसे like this), जो एक $resourcequery() से आता युक्त है।

और मैं के साथ एक मेज में बदल की जरूरत है:

  1. एक इनपुट (किया over here की तरह)

कोई एक समाधान प्रदान कर सकते हैं या से छंटाई

  • पृष्ठांकन
  • छनन कम से कम एक सलाह यह सब एक साथ कैसे रखा जाए?

    अद्यतन

    तो, irc चैनल पर wafflejock के महान मदद के साथ मैं एक साथ कार्यक्षमता के कुछ डाल कर लिया है। यहां the plunk है।

    क्या अभी भी गलत है:

    1. json डाटासेट हर बार जब मैं पेज, छंटाई या कुछ और बदलने का अनुरोध किया जाता है। यह अनुरोधों की एक बड़ी राशि है, इसलिए मुझे किसी भी तरह कैश करने के लिए इसकी आवश्यकता है।
    2. मुझे मूल्य बदलने और आवश्यकता होने पर उपयोगकर्ताओं को हटाने के लिए नियंत्रक से डेटासेट में हेरफेर करने में सक्षम होना चाहिए। अभी भी यह नहीं पता कि इसे कैसे कार्यान्वित किया जाए।
  • उत्तर

    11

    हाय Almaron (उर्फ Malkav) मैं आईआरसी से wafflejock हूँ यहाँ के रूप में सबसे अच्छा काम करने की बात है मैं समझ सकता है:

    http://plnkr.co/edit/TUOYmM?p=preview

    var app = angular.module('main', ['ngTable']). 
    controller('DemoCtrl', function($scope, ngTableParams, NameService) { 
    
        var data = NameService.data; 
    
        $scope.tableParams = new ngTableParams(
         { 
         page: 1,   // show first page 
         count: 10,   // count per page 
         sorting: {name:'asc'} 
         }, 
         { 
         total: 0, // length of data 
         getData: function($defer, params) { 
          NameService.getData($defer,params,$scope.filter); 
         } 
        }); 
    
        $scope.$watch("filter.$", function() { 
         $scope.tableParams.reload(); 
        }); 
    
    }); 
    
    app.service("NameService", function($http, $filter){ 
    
        function filterData(data, filter){ 
        return $filter('filter')(data, filter) 
        } 
    
        function orderData(data, params){ 
        return params.sorting() ? $filter('orderBy')(data, params.orderBy()) : filteredData; 
        } 
    
        function sliceData(data, params){ 
        return data.slice((params.page() - 1) * params.count(), params.page() * params.count()) 
        } 
    
        function transformData(data,filter,params){ 
        return sliceData(orderData(filterData(data,filter), params), params); 
        } 
    
        var service = { 
        cachedData:[], 
        getData:function($defer, params, filter){ 
         if(service.cachedData.length>0){ 
         console.log("using cached data") 
         var filteredData = filterData(service.cachedData,filter); 
         var transformedData = sliceData(orderData(filteredData,params),params); 
         params.total(filteredData.length) 
         $defer.resolve(transformedData); 
         } 
         else{ 
         console.log("fetching data") 
         $http.get("http://www.json-generator.com/api/json/get/bUAZFEHxCG").success(function(resp) 
         { 
          angular.copy(resp,service.cachedData) 
          params.total(resp.length) 
          var filteredData = $filter('filter')(resp, filter); 
          var transformedData = transformData(resp,filter,params) 
    
          $defer.resolve(transformedData); 
         }); 
         } 
    
        } 
        }; 
        return service; 
    }); 
    

    असल में मैं सेटअप में कुछ कार्यों उन करने के लिए इसे पढ़ने के लिए थोड़ा आसान बनाने के लिए लंबी लाइनें और उसके बाद एक कैश्डडेटा ऑब्जेक्ट सेट करें जिसे मैं यह देखने के लिए जांचता हूं कि यह कॉल करने से पहले पॉप्युलेट किया गया है ... ऐसा लगता है कि यह अभी भी शुरुआत में दो कॉल बहुत जल्दी बनाता है मुझे यकीन है कि आप कर सकते हैं डेटा को पहले से लोड किया जा रहा है या नहीं, यह जांचने के लिए ध्वज का उपयोग करके इसे से बचें और यदि ऐसा है तो बस कॉल को फिर से चालू करने के बजाय प्रतीक्षा करें, लेकिन यह सुनिश्चित नहीं है कि यह एक है बड़ा सौदा।

    +0

    बहुत बहुत धन्यवाद। मेरा मानना ​​है कि दूसरी कॉल फ़िल्टर पर $ घड़ी से आता है। मेरे पास एकमात्र प्रश्न यह है कि डेटा नाम 'नेमस्काइम डेटा' से क्यों लोड किया गया है जब ऐसी कोई चीज़ नहीं है? – Almaron

    0

    $http.get का दूसरा पैरामीटर एक config वस्तु लेता है - चाबियाँ लेता में से एक cache है, तो आप अपने GET अनुरोध कैश करने के लिए सही पर सेट किया जा सकता है। अनुरोधों को कम करने के लिए एक और तरीका _.debouncelodash या underscore से एक निश्चित समय अवधि के भीतर किए गए अनुरोधों को अस्वीकार करने के लिए उपयोग करना होगा।

    डेटा को संपादित करने के लिए, अपने टेम्पलेट में, आप एनजी-मॉडल के साथ एक इनपुट और एनजी-बाइंड (या डबल घुंघराले ब्रेसिज़ {{}}) के साथ एक स्पैन कर सकते हैं और एक एनजी-शो और एनजी-छुपा है संपादन के लिए उनके लिए एक ही चर।

    +0

    धन्यवाद, मैंने कैशिंग के बारे में सोचा, लेकिन मैं वास्तव में क्या करना चाहता हूं कि getData फ़ंक्शन से '$ http' अनुरोध प्राप्त करने का प्रयास करें और वहां कुछ प्रकार का $ scope.users सरणी डालें जो मैं कुशलतापूर्वक कर सकता हूं कटोरा नियंत्रक। – Almaron

    +0

    मैं ngTable क्लास इंस्टॉलेशन के बाहर 'NameService.getData' कॉल को हटा दूंगा और इसे नियंत्रक में कहीं और कर दूंगा, और परिणामों को' $ scope.users' पर सेट करूँगा, फिर उस डेटा का उपयोग ngTable के साथ करें। – BahamutWC

    +0

    क्या आप प्लंक फोर्क कर सकते हैं और दिखा सकते हैं कि यह कैसे करें? – Almaron

    0

    स्थिति scope.returnListGrid.settings()। $ स्कोप की स्थिति में दूसरी कॉल को सरल द्वारा रोका जा सकता है!= शून्य

    संबंधित मुद्दे