2016-08-23 19 views
5

में सूची सर्च कर रहे हैं मैं एक पृष्ठ में एक खोज बॉक्स है यानी header.html फ़ाइल और सूची है जिस पर मैं लागू करने के लिए खोज की कार्यक्षमता एक और पेज यानी content.html पर है चाहता हूँ। तो मैं इस मामले में कोणीय खोज कार्यक्षमता का उपयोग कैसे कर सकता हूं। नीचे एचटीएमएल कोड है।कोणीय जे एस

header.html

<div class="input-group col-md-12 search-inner-page "> 
    <input type="text" class="form-control" placeholder="Search" name="q"> 
</div> 

content.html

<div class="surveyList" ng-repeat="survey in allSurveys"> 
    <span class="checkbox" ></span> 
    <div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()"> 
     <div class="col-xs-5 col-sm-2 col-md-2">{{survey.Name}}</div> 
     <div class="col-xs-5 col-sm-1 col-md-1">{{survey.Type}}</div> 
     <div class="col-sm-3 col-md-3 hidden-xs">{{survey.SurveyReference}}</div> 
     <div class="col-sm-3 col-md-3 hidden-xs">{{survey.CreatedDate}}</div> 
     <div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">{{survey.Status}}</div> 
     <div class="hidden-xs surveyListTool" ng-show="hoverEdit"> 
     <a class="editSurvey" title="edit"></a> 
     <a class="deleteSurvey" title="delete"></a> 
     <a class="exportSurvey" title="export survey"></a> 
     <a class="menuSurvey" title="menu"></a> 
    </div> 
</div> 

contentCtrl.js

angular.module("adminsuite").controller("surveyController",['getAllSurveyService','AuthenticationService', '$scope','$rootScope', '$state', function(getAllSurveyService,AuthenticationService, $scope,$rootScope,$state){ 

getAllSurveyService.surveyList().then(
function(data) { 
    $scope.allSurveys = data; 
    console.log($scope.allSurveys); 
    if($scope.allSurveys.ErrorMessage){ 
     AuthenticationService.ClearCredentials(); 
     $state.go('login'); 
    } 
} 
); 

}]); 

headerController.js

angular.module("adminsuite").controller("headerController",['AuthenticationService','$rootScope','$cookieStore','$scope',function(AuthenticationService,$cookieStore,$scope,$rootScope){ 
    $scope.header = "Header"; 
    $scope.searchInSurvey = $scope.surveySearch; 
    $scope.logout = function(){ 
       //$scope.dataLoading = true; 
       AuthenticationService.ClearCredentials(); 
       console.log($cookieStore.get('globals')); 
       //$state.go('login'); 
      }; 
    }]); 

header.html की खोज बॉक्स में कुछ टाइपिंग पर जैसा कि ऊपर उल्लेख किया है, यह content.html पेज में सामग्री खोज करनी चाहिए।

+0

आप header.html में कुछ और है? किसी और चीज के लिए इनपुट टेक्स्ट तत्व का उपयोग करें? – Aravind

उत्तर

0

के लिए आप लोगों को धन्यवाद। मैं इस तरह जवाब ...

header.html

<div class="input-group col-md-12 search-inner-page"> 
         <input type="text" class="form-control" placeholder="Search" name="q" ng-model="global.search"> 
         <img src = "images/search.png" alt = "Generic placeholder thumbnail" > 
        </div> 

सामग्री मिला है।एचटीएमएल

<div class="surveyList" ng-repeat="survey in allSurveys | filter:global.search"> 
<span class="checkbox" ></span> 
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()"> 
    <div class="col-xs-5 col-sm-2 col-md-2">{{survey.Name}}</div> 
    <div class="col-xs-5 col-sm-1 col-md-1">{{survey.Type}}</div> 
    <div class="col-sm-3 col-md-3 hidden-xs">{{survey.SurveyReference}}</div> 
    <div class="col-sm-3 col-md-3 hidden-xs">{{survey.CreatedDate}}</div> 
    <div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">{{survey.Status}}</div> 
    <div class="hidden-xs surveyListTool" ng-show="hoverEdit"> 
    <a class="editSurvey" title="edit"></a> 
    <a class="deleteSurvey" title="delete"></a> 
    <a class="exportSurvey" title="export survey"></a> 
    <a class="menuSurvey" title="menu"></a> 
</div> 

headerCtrl.js

$rootScope.global = { 
    search: '' 
}; 
0

allSurveys सरणी को अपडेट करने के लिए आप header.html के इनपुट पर ng-change का उपयोग कर सकते हैं।

बस अपने नियंत्रक में अपने इनपुट

<div class="input-group col-md-12 search-inner-page "> 
    <input ng-model="yourCtrl.searchInput" ng-change="yourCtrl.searchInputChanged" type="text" class="form-control" placeholder="Search" name="q"> 
</div> 

करने के लिए एक ng-change और एक ng-model जोड़ने आप एक समारोह searchInputChanged.filter() का उपयोग कर searchInput के आधार पर डेटा फ़िल्टर करते हैं जोड़ सकते हैं।

+0

यदि दो विचारों के लिए दो अलग-अलग नियंत्रक का उपयोग कर रहा हूं तो क्या यह मामला सामने आएगा? – Kishan

+0

यदि आप 2 नियंत्रक का उपयोग कर रहे हैं तो आपको एक सेवा बनाना चाहिए। आप service.html में उपयोग की जाने वाली सरणी "allSurveys" को वापस कर सकते हैं और header.html में नियंत्रक userd फ़िल्टर सेट करने के लिए एक ही सेवा को कॉल कर सकता है। – Eric

+0

क्या आप मुझे बता सकते हैं कि मैं अपने उदाहरण में सेवा का उपयोग कैसे कर सकता हूं? मैंने "सर्वे कंट्रोलर" दिया है जहां से सभी सर्वेक्षण मिल रहे हैं। उस – Kishan

0

आप एक $ rootScope में एक चर में सर्वेक्षण की अपनी सूची निर्धारित कर सकते हैं, और इस तरह, एक और नियंत्रक से अपने मूल्य मिलता है:

//Controller that contains the list 
$rootScope.surveysList = [s1,s2,s3,...,sn]; 

उसके बाद, आप इस चर हो और नियंत्रक में सेट कर सकते हैं दायरा जहां आपका इनपुट है।

$scope.allSurveys = $rootScope.surveysList; 

आपका इनपुट इस तरह होना चाहिए:

<input ng-model="surveySearch" type="text" class="form-control" placeholder="Search" name="q"> 

और अपनी सूची टेम्पलेट में कुए क्वेरी इस तरह होना चाहिए:

ng-repeat="survey in allSurveys | filter:surveySearch" 

मुझे आशा है कि यह काम करता है आप

+0

यह मेरे लिए काम नहीं कर रहा है – Kishan

+0

क्या आपने $ rootScope को दोनों नियंत्रकों की निर्भरता के रूप में सेट किया था? –

+0

मैंने आपके द्वारा उल्लिखित सभी चीजें जोड़ दी हैं। बात यह है कि ng-model = "सर्वेक्षण खोज" इसके स्कोप ऑब्जेक्ट वेरिएबल से जुड़े विशेष नियंत्रक के लिए। तो अगर मैं इस HTML टेम्पलेट के बाहर इस तक पहुंचने का प्रयास कर रहा हूं तो ऐसा करने के लिए कैसे उपयोग करें? – Kishan

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