649

मैंने एक फ़िल्टर फ़ंक्शन लिखा है जो आपके द्वारा पास किए गए तर्क के आधार पर डेटा लौटाएगा। मैं अपने नियंत्रक में समान कार्यक्षमता चाहता हूं। क्या एक नियंत्रक में फ़िल्टर फ़ंक्शन का पुन: उपयोग करना संभव है?

यह वही है जो मैंने अब तक कोशिश की है:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}

angularjs angular-filters ng-controller

— सुमंत
स्रोत

2

बेहतर जवाब: stackoverflow.com/questions/20131553/…

— रज़ा अहमद

1051

अपने कंट्रोलर को $ फ़िल्टर इंजेक्ट करें

function myCtrl($scope, $filter)
{
}

फिर जहाँ भी आप उस फ़िल्टर का उपयोग करना चाहते हैं, बस उसका उपयोग इस तरह करें:

$filter('filtername');

यदि आप उस फ़िल्टर के लिए तर्क पारित करना चाहते हैं, तो इसे अलग कोष्ठकों का उपयोग करके करें:

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}

arg1वह सरणी कहाँ है जिस पर आप फ़िल्टर करना चाहते हैं और फ़िल्टर arg2करने के लिए उपयोग की जाने वाली वस्तु है।

— JSAddict
स्रोत

21

क्षमा करें, महोदय, मुझे अभी भी समझ में नहीं आया है। क्या आप संभवतः फ़िल्टर फ़ंक्शन बॉडी को कैसे परिभाषित करें और HTML फ़ाइल में कैसे डाला जाए, यह दिखाने के लिए Jsfiddle बना सकते हैं?

— gm2008

34

@ gm2008 आप var anyNumber = $filter('number')(12.222222, 2);पाने के लिए नंबर फिल्टर का उपयोग कर सकते हैं 12.22।

— विनेश

20

+ मैं सवाल का जवाब देने के लिए ... जो था "एक नियंत्रक में एक फिल्टर का उपयोग कैसे करें?"

— शनीमल

8

फ़िल्टर में "मुद्रा" निर्माण के साथ एक उदाहरण: $filter("currency")(price, "$", 2)इसलिए यदि आपके पास मूल्य = 200 था, तो यह अभिव्यक्ति "$ 200.00" होगी।

— नेटसी

2

@ Pkozlowski.opensource द्वारा जवाब इस से बेहतर है क्योंकि यह "जादू के तार" को कम करता है। एक लाभ - क्या होगा यदि यह बहुत अधिक जटिल नियंत्रक में था और आप उपयोग किए जा रहे फिल्टर का परीक्षण करने में विफल रहे? यदि आप $filter('filtter1')(2 t's) का उपयोग करते हैं तो आपको त्रुटि नहीं दिखाई देगी । हालांकि, अगर आप filtter1Filterकोणीय इंजेक्षन करते हैं तो तुरंत शिकायत होगी कि निर्भरता मौजूद नहीं है।

— jkjustjoshing

253

@Prashanth द्वारा प्रदान किया गया उत्तर सही है, लेकिन ऐसा करने का और भी आसान तरीका है। मूल रूप से $filterनिर्भरता को इंजेक्ट करने और इसे लागू करने के अजीब सिंटैक्स का उपयोग करने के बजाय ( $filter('filtername')(arg1,arg2);एक) निर्भरता को इंजेक्ट कर सकते हैं: नाम प्लस और Filterप्रत्यय को फ़िल्टर करें ।

प्रश्न से उदाहरण लेते हुए कोई भी लिख सकता है:

function myCtrl($scope, filter1Filter) { 
  filter1Filter(input, arg1);
}

यह ध्यान दिया जाना चाहिए कि आपको Filterफ़िल्टर नाम के लिए fooFilter
आवेदन करना चाहिए , कोई फर्क नहीं पड़ता कि आप किस नामकरण सम्मेलन का उपयोग कर रहे हैं: foo को कॉल करके संदर्भित किया जाता है fooFilter को कॉल करके संदर्भित किया जाता हैfooFilterFilter

— pkozlowski.opensource
स्रोत

38

ज़रूर .. लेकिन मैं अभी भी एक ऐसे मामले का पता लगा रहा हूँ जहाँ आप एक वर्ग को 10 फ़िल्टर इंजेक्ट करना चाहेंगे ... ऐसी कक्षा शायद एकल जिम्मेदारी सिद्धांत का उल्लंघन करेगी ...

— pkozlowski.opensource

10

बस स्पष्ट करने के लिए, कि यह कोई "अजीब" जेएस सिंटैक्स नहीं है ... var fooFilter = $ फ़िल्टर ('फू'); fooFilter (arg1, arg2);

— अंधभक्त

13

@OZ_ तुम्हारा क्या मतलब है? यह काम करता है या नहीं। मिनिमेशन का यहां कोई लेना देना नहीं है, इस प्लंक को

— pkozlowski.opensource

2

यह एकल फ़िल्टर का उपयोग करने के लिए आदर्श है, यही वह स्थिति है जिसमें मैं भाग गया था।

— मैथ्यू फ़ॉटलर

2

+1 मुझे लगता है कि $ फ़िल्टर सिंटैक्स निर्भरता को छुपाता है, इस प्रकार कम रखरखाव योग्य कोड के लिए अग्रणी होता है। फिल्टर को "स्टैटिकली" कहना एक बेहतर विकल्प है।

— 14

79

निम्नलिखित नमूना कोड का उपयोग करके हम नाम से कोणीय नियंत्रक में सरणी फ़िल्टर कर सकते हैं। यह निम्नलिखित विवरण पर आधारित है। http://docs.angularjs.org/guide/filter

this.filteredArray = filterFilter (यह। सरणी, {नाम: 'इगोर'});

जे एस:

 angular.module('FilterInControllerModule', []).
    controller('FilterController', ['filterFilter', function(filterFilter) {
      this.array = [
        {name: 'Tobias'},
        {name: 'Jeff'},
        {name: 'Brian'},
        {name: 'Igor'},
        {name: 'James'},
        {name: 'Brad'}
      ];
      this.filteredArray = filterFilter(this.array, {name:'Igor'});
    }]);

एचटीएमएल

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example96-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="FilterInControllerModule">
    <div ng-controller="FilterController as ctrl">
    <div>
      All entries:
      <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
    </div>
    <div>
      Filter By Name in angular controller
      <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
    </div>
  </div>
</body>
</html>

— आमिर सज्जाद
स्रोत

4

फ़िल्टरफ़िल्टर (यह। ऐरे, {नाम: 'इगोर'}); फ़िल्टरफ़िल्टर एक कीवर्ड है या यह स्वतः ही डेटा को फ़िल्टर करता है और क्यों ['फ़िल्टरफ़िल्टर', फंक्शन (फ़िल्टरफ़िल्टर) {यहाँ परिभाषित किया गया है! ?

— सूरज कच्चे

इस तकनीक के अधिक उदाहरणों के साथ एक प्ल्नकर: plnkr.co/edit/icFurX?p=preview

— Ozbus

बहुत मददगार। धन्यवाद।

— कुशाल जायसवाल

48

यहां filterएक कोणीय नियंत्रक में उपयोग करने का एक और उदाहरण दिया गया है :

$scope.ListOfPeople = [
    { PersonID: 10, FirstName: "John", LastName: "Smith", Sex: "Male" },
    { PersonID: 11, FirstName: "James", LastName: "Last", Sex: "Male" },
    { PersonID: 12, FirstName: "Mary", LastName: "Heart", Sex: "Female" },
    { PersonID: 13, FirstName: "Sandra", LastName: "Goldsmith", Sex: "Female" },
    { PersonID: 14, FirstName: "Shaun", LastName: "Sheep", Sex: "Male" },
    { PersonID: 15, FirstName: "Nicola", LastName: "Smith", Sex: "Male" }
];

$scope.ListOfWomen = $scope.ListOfPeople.filter(function (person) {
    return (person.Sex == "Female");
});

//  This will display "There are 2 women in our list."
prompt("", "There are " + $scope.ListOfWomen.length + " women in our list.");

सरल, अरे?

— माइक गिल्डहिल
स्रोत

6

यह वही है जो मुझे चाहिए था, धन्यवाद। हालांकि जाहिरा तौर पर यह है नहीं क्या सवाल के बारे में है। :)

— पावगोरन

38

ऐसा करने के तीन संभावित तरीके हैं।

मान लें कि आपके पास निम्नलिखित सरल फ़िल्टर हैं, जो एक स्ट्रिंग को अपरकेस में परिवर्तित करता है, जिसमें केवल पहले वर्ण के लिए एक पैरामीटर है।

app.filter('uppercase', function() {
    return function(string, firstCharOnly) {
        return (!firstCharOnly)
            ? string.toUpperCase()
            : string.charAt(0).toUpperCase() + string.slice(1);
    }
});

के माध्यम से सीधे $filter

app.controller('MyController', function($filter) {

    // HELLO
    var text = $filter('uppercase')('hello');

    // Hello
    var text = $filter('uppercase')('hello', true);

});

नोट: यह आपको आपके सभी फ़िल्टर तक पहुँच प्रदान करता है ।

असाइन $filterएक करने के लिएvariable

यह विकल्प आपको $filterए की तरह उपयोग करने की अनुमति देता है function।

app.controller('MyController', function($filter) {

    var uppercaseFilter = $filter('uppercase');

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

केवल एक विशिष्ट लोड करें Filter

आप फ़िल्टर नाम के साथ जोड़कर केवल एक विशिष्ट फ़िल्टर लोड कर सकते हैं Filter।

app.controller('MyController', function(uppercaseFilter) {

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

जो आप उपयोग करते हैं वह व्यक्तिगत पसंद पर आता है, लेकिन मैं तीसरे का उपयोग करने की सलाह देता हूं, क्योंकि यह सबसे पठनीय विकल्प है।

— जेफरी रोसडेन्गल
स्रोत

15

function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

     $scope.result = function(){
        return $filter('lowercase')($scope.name);
    };
}

नियंत्रक विधि 2 तर्क नाम "$ फ़िल्टर" होना चाहिए तब केवल फ़िल्टर कार्यक्षमता इस उदाहरण के साथ काम करेगी। इस उदाहरण में मैंने "लोअरकेस" फ़िल्टर का उपयोग किया है।

— Ipog
स्रोत

12

मेरे पास एक और उदाहरण है, जिसे मैंने अपनी प्रक्रिया के लिए बनाया है:

मुझे इस तरह के मूल्य-विवरण के साथ एक ऐरे मिलता है

states = [{
    status: '1',
    desc: '\u2713'
}, {
    status: '2',
    desc: '\u271B'
}]

मेरे फ़िल्टर में। js:

.filter('getState', function () {
    return function (input, states) {
        //console.log(states);
        for (var i = 0; i < states.length; i++) {
            //console.log(states[i]);
            if (states[i].status == input) {
                return states[i].desc;
            }
        }
        return '\u2718';
    };
})

फिर, एक परीक्षण संस्करण (नियंत्रक):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}

— NtSpeed
स्रोत

क्या यह काम कोणीय 1.0.8 में होगा ?? coz इसकी मेरे लिए काम नहीं कर रहा है..क्या $ फ़िल्टर परिभाषित नहीं होने के बाद भी मैं नियंत्रक में जोड़ा गया है

— Shajin

7

AngularJs आपको टेम्पलेट या कंट्रोलर, डायरेक्टिव आदि के अंदर फिल्टर का उपयोग करने की सुविधा देता है।

टेम्पलेट में आप इस सिंटैक्स का उपयोग कर सकते हैं

{{ variable | MyFilter: ... : ... }}

और अंदर नियंत्रक आप $ फ़िल्टर सेवा को इंजेक्ट करने का उपयोग कर सकते हैं

angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
    $filter('MyFilter')(arg1, arg2);
})

यदि आपको डेमो उदाहरण के साथ और अधिक की आवश्यकता है तो यहां एक लिंक है

AngularJs उदाहरण और डेमो फ़िल्टर करते हैं

— हज़ारपते तुनयान
स्रोत

उकसाना एक शब्द नहीं है। क्या आपको इंजेक्शन लगाने का मतलब है?

— केविंक

oops.yea मेरा मतलब है इंजेक्शन लगाना।

— हजारापेट तुनयान

6

फिल्टर का मूल्यांकन करने का एक और तरीका है जो विचारों से वाक्य रचना को प्रतिबिंबित करता है। मंगलाचरण बालों वाली है, लेकिन आप इसे एक शॉर्टकट बना सकते हैं। मुझे यह पसंद है कि स्ट्रिंग का वाक्य-विन्यास आपके विचार में समान है। इस तरह दिखता है:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}

— SimplGy
स्रोत

यह वास्तव में बहुत उपयोगी है!

— ड्रैगनकटनाइट

1

यह शानदार है क्योंकि यह मुझे एक स्ट्रिंग को पारित करने की अनुमति देता है जो ठीक वैसे ही दिखता है जैसे यह मार्कअप में होता है।

— केविन

5

ऐसा लगता है कि किसी ने उल्लेख नहीं किया है कि आप $ फिल्टर ('फ़ाइल नाम') में arg2 के रूप में एक फ़ंक्शन का उपयोग कर सकते हैं (arg1, arg2);

उदाहरण के लिए:

$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});

— pavok
स्रोत

2

एक नियंत्रक में $ फ़िल्टर का उपयोग करके सरल तिथि उदाहरण होगा:

var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd");

जैसा कि यहाँ बताया गया है - https://stackoverflow.com/a/20131782/262140

— AVH
स्रोत

1

यदि हम जावास्क्रिप्ट एंगुलर फिल्टर में एकल मान के बजाय कई शर्तों को जोड़ना चाहते हैं तो नीचे दिए गए कोड का उपयोग करें:

var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)

— अमय कुलकर्णी
स्रोत

1

सबसे पहले अपने कंट्रोलर को $ फ़िल्टर इंजेक्ट करें, जिससे सुनिश्चित होता है कि आपके ऐप के भीतर ngSanitize लोड किया गया है, बाद में कंट्रोलर का उपयोग इस प्रकार है:

$filter('linky')(text, target, attributes)

हमेशा कोणीयज डॉक्स की जांच करें

— serdarsenay
स्रोत

1

यदि आप नियंत्रक में ऑब्जेक्ट को फ़िल्टर करना चाहते हैं तो यह कोशिश करें

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                        if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                        return obj;
                });

यह फ़िल्टर्ड ऑब्जेक्ट के अनुसार यदि स्थिति होगी

— कोड जासूस
स्रोत

0

एक Angular.js फ़िल्टर का पुन: उपयोग करना - दृश्य / नियंत्रक

यह सॉल्यूशन एंगुलर फिल्टर्स का पुन: उपयोग कर रहा है। जो डेटा को फ़िल्टर करने का एक और तरीका है, और जब मुझे ऐसी ज़रूरत हुई तो Google ने मुझे यहाँ उतारा; और मुझे साझा करना पसंद है

उदाहरण

यदि आप पहले से ही फ़िल्टर कर रहे हैं, तो अपने दृश्य में एनजी-रिपीट में कहें (नीचे के रूप में), तो आपने नियंत्रक में एक फिल्टर को आगे के रूप में परिभाषित किया होगा। और फिर आप अंतिम उदाहरणों के रूप में पुन: उपयोग कर सकते हैं।

फ़िल्टर का उपयोग उदाहरण - दृश्य में फ़िल्टर्ड दोहराएँ

<div ng-app="someApp" ng-controller="someController">
    <h2>Duplicates</h2>
    <table class="table table-striped table-light table-bordered-light">
        <thead>
            <tr>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="person in data | filter: searchDuplicate:true">
                <td>{{person.name}}</td>
                <td>{{person.gender}}</td>
            </tr>
        </tbody>
    </table>
</div>

कोणीय फ़िल्टर परिभाषा उदाहरण

angular.module('someApp',[])
.controller('someController', function($scope, $filter ) {

    $scope.people = [{name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'female', hasDuplicate: false}];

    $scope.searchDuplicate = { hasDuplicate : true };
})

इसलिए, यहां अवधारणा यह है कि आप पहले से ही अपने दृश्य के लिए बनाए गए फ़िल्टर का उपयोग कर रहे हैं, और तब आपको पता चलता है कि आप इसे अपने नियंत्रक में भी उपयोग करना चाहते हैं।

फ़िल्टर उदाहरण का उपयोग नियंत्रक उदाहरण 1 के भीतर

var dup = $filter('filter')($scope.people, $scope.searchDuplicate, true)

फ़िल्टर उदाहरण का उपयोग नियंत्रक उदाहरण 2 के भीतर

पूर्व फ़िल्टर का उपयोग करके कोई डुप्लिकेट नहीं मिलने पर ही बटन दिखाएं।

एचटीएमएल बटन

<div ng-if="showButton()"><button class="btn btn-primary" ng-click="doSomething();"></button></div>

दिखाएँ बटन / छिपाएँ

$scope.doSomething = function(){ /* ... */ };
$scope.showButton = function(){ return $filter('filter')($scope.people, $scope.searchDuplicate, true).length == 0; };

कुछ को फ़िल्टर करने का यह संस्करण आसान लग सकता है, और यह एक Angular.js विकल्प है।

वैकल्पिक तुलनित्र पैरामीटर "सही" दृश्य में और $ फ़िल्टर फ़ंक्शन कॉल में उपयोग किया जाता है, यह निर्दिष्ट करता है कि आप एक सख्त तुलना चाहते हैं। यदि आप छोड़ देते हैं, तो कई स्तंभों के लिए मान खोजे जा सकते हैं।

https://docs.angularjs.org/api/ng/filter/filter

— ग्रेग
स्रोत

नियंत्रक में फ़िल्टर का उपयोग कैसे करें?

ऐसा करने के तीन संभावित तरीके हैं।