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




angular-filters ng-controller (9)

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

मैंने अभी तक यह कोशिश की है:

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

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

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

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);

});

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

एक variable को $filter असाइन करें

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

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

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

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

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

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

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

});

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


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

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

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

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


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

function myCtrl($scope, $filter)
{
}

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

$filter('filtername');

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

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

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


एक कोणीय नियंत्रक में 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.");

सरल, हे?


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

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

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

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

this.filteredArray = filterFilter (this.array, {name: 'Igor'});

जे एस:

 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>

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

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

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

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

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

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

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






ng-controller