649

আমি একটি ফিল্টার ফাংশন লিখেছি যা আপনি যে যুক্তিটি পার করছেন তার উপর ভিত্তি করে ডেটা ফেরত দেবে। আমি আমার নিয়ামক মধ্যে একই কার্যকারিতা চাই। একটি নিয়ামক মধ্যে ফিল্টার ফাংশন পুনরায় ব্যবহার করা সম্ভব?

আমি এ পর্যন্ত চেষ্টা করেছি:

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

angularjs angular-filters ng-controller

— sumanth
সূত্র

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 ফাইলে sertedোকানো হয় তা দেখানোর জন্য আপনি সম্ভবত একটি জাস্টফিল তৈরি করতে পারেন?

— gm2008

34

@ gm2008 আপনি var anyNumber = $filter('number')(12.222222, 2);পেতে চান নম্বর ফিল্টার ব্যবহার করতে পারেন 12.22।

— ভিনেশ

20

+ আমি প্রশ্নের উত্তর দেওয়ার জন্য ... যা ছিল "একটি নিয়ামকটিতে ফিল্টার কীভাবে ব্যবহার করবেন?"

— শানিমাল

8

ফিল্টারে "মুদ্রা" বিল্ড সহ একটি উদাহরণ: $filter("currency")(price, "$", 2)সুতরাং আপনার যদি দাম = 200 হয়, তবে এই অভিব্যক্তিটি "$ 200.00" ফিরে আসত।

— Netsi1964

2

@ পকোজ্লোস্কি.ওপেনসোর্সের উত্তর এর চেয়ে ভাল কারণ এটি "ম্যাজিক স্ট্রিং" হ্রাস করে। একটি সুবিধা - এটি যদি আরও জটিল নিয়ন্ত্রকের মধ্যে থাকে এবং আপনি ফিল্টারটি ব্যবহারের পরীক্ষা করতে ব্যর্থ হন তবে? আপনি যদি $filter('filtter1')(2 টি) ব্যবহার করেন তবে আপনি ত্রুটিটি লক্ষ্য করবেন না । তবে, আপনি যদি filtter1Filterকৌনিকটি ইনজেক্ট করেন তবে অবিলম্বে অভিযোগ করবে যে নির্ভরতার অস্তিত্ব নেই।

— jkjustjoshing

253

@ প্রশান্তের দেওয়া উত্তরটি সঠিক, তবে এটি করার আরও সহজ উপায়ও রয়েছে। মূলত $filterনির্ভরতা ইনজেকশনের পরিবর্তে এবং এটির অনুরোধের বিশ্রী সিনট্যাক্স ব্যবহার না করে যে কোনও ব্যক্তি নির্ভরশীলতা ইনজেক্ট $filter('filtername')(arg1,arg2);করতে পারে: ফিল্টার নাম এবং Filterপ্রত্যয়।

প্রশ্ন থেকে উদাহরণস্বরূপ যে কেউ লিখতে পারে:

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

এটি অবশ্যই লক্ষ করা উচিত যে আপনি Filterফিল্টার fooFilter
নামটিতে অবশ্যই যুক্ত হবেন, আপনি যে নামকরণ কনভেনশনটি ব্যবহার করছেন তা বিবেচনা না করেই: foo- কে ফোন করে রেফারেন্স করা হয়fooFilterFilter

— pkozlowski.opensource
সূত্র

38

অবশ্যই .. তবে আমি এখনও এমন একটি ব্যবহারের সন্ধান পেয়েছি যেখানে আপনি এক শ্রেণিতে 10 টি ফিল্টার ইনজেক্ট করতে চান ... এই জাতীয় শ্রেণি সম্ভবত একক দায়িত্বের নীতি লঙ্ঘন করবে ...

— pkozlowski.opensource

10

কেবল পরিষ্কার করার জন্য, এটি কোনও "বিশ্রী" জেএস সিনট্যাক্স নয়… var fooFilter = $ ফিল্টার ('foo'); fooFilter (arg1, arg2);

— অন্ধচেনা

13

@ ওজেড_ মানে কি? এটি মিনিফিকেশন কাজ করে বা না। মিনিফিকেশনের এখানে কিছু করার নেই, এই নিমজ্জনটি

— pkozlowski.opensource

2

এটি একটি একক ফিল্টার ব্যবহারের জন্য আদর্শ, যা আমি এর মধ্যেই ছুটে এসেছি।

— ম্যাথু ফটজার

2

+1 আমি মনে করি $ ফিল্টার সিনট্যাক্স নির্ভরতা আড়াল করে, এইভাবে কম রক্ষণাবেক্ষণযোগ্য কোডের দিকে নিয়ে যায়। "স্ট্যাটিকালি" ফিল্টারগুলি ইনজেকশন করা আরও ভাল পছন্দ।

— বিআইআইবি

79

নিম্নলিখিত নমুনা কোড ব্যবহার করে আমরা নাম দ্বারা কৌনিক নিয়ামক মধ্যে অ্যারে ফিল্টার করতে পারেন। এটি নিম্নলিখিত বর্ণনার উপর ভিত্তি করে। http://docs.angularjs.org/guide/filter

this.filteredArray = ফিল্টার ফিল্টার (this.array, {নাম: 'আইগর'});

জাতীয়:

 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

ফিল্টারফিল্টার (this.array, {নাম: 'আইগর'}); ফিল্টারফিল্টার একটি কীওয়ার্ড বা এটি কীভাবে স্বয়ংক্রিয়ভাবে ডেটা ফিল্টার করে এবং কেন ['ফিল্টারফিল্টার', ফাংশন (ফিল্টারফিল্টার) এখানে সংজ্ঞায়িত হয়! ?

— সুরজ কাবাত

এই কৌশলটির আরও উদাহরণ সহ একটি Plnkr: plnkr.co/edit/icFurX?p= পূর্বরূপ

— ওজোবি

খুব উপকারী. ধন্যবাদ।

— কুশল জয়েসওয়াল

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

ধন্যবাদ এটি আমার প্রয়োজন ঠিক তাই। যদিও আপাতদৃষ্টিতে এই হল না কি প্রশ্ন সম্পর্কে। :)

— pvgoran

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'
}]

আমার ফিল্টার.জেজে:

.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 এ কাজ করবে? কোজ এটি আমার পক্ষে কাজ করছে না ... বলি $ ফিল্টার সংজ্ঞায়িত হওয়ার পরেও আমি নিয়ামক হিসাবে যোগ করি নি

— shajin

7

AngularJs আপনাকে টেমপ্লেটের অভ্যন্তরে বা নিয়ন্ত্রণকারী, নির্দেশিকা ইত্যাদির ভিতরে ফিল্টার ব্যবহার করতে দেয় ..

টেমপ্লেটে আপনি এই সিনট্যাক্সটি ব্যবহার করতে পারেন

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

এবং নিয়ন্ত্রণকারী ভিতরে আপনি you ফিল্টার পরিষেবা ইনজেকশন ব্যবহার করতে পারেন

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

আপনার যদি ডেমো উদাহরণের সাথে আরও বেশি প্রয়োজন হয় তবে এখানে একটি লিঙ্ক

AngularJs ফিল্টার উদাহরণ এবং ডেমো

— হাজরপেট টুনানিয়ান
সূত্র

ইনসেটিং কোনও শব্দ নয়। আপনি ইনজেকশন মানে?

— কেভিঙ্ক

ওফস.ইয়া মানে ইনজেকশন দেওয়া।

— হাজরাপেট টুনানিয়ান

6

ফিল্টারগুলি মূল্যায়নের অন্য উপায় যা দর্শনগুলি থেকে সিনট্যাক্সকে মিরর করে। অনুরোধটি লোমশ হলেও আপনি এটিতে একটি শর্টকাট তৈরি করতে পারেন। আমি পছন্দ করি যে স্ট্রিংয়ের বাক্য গঠনটি আপনার মতামত অনুসারে একরকম। এটা এমন দেখতে:

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

— SimplGy
সূত্র

এটি আসলে খুব দরকারী!

— ড্রাগনকনাইট

1

এটি দুর্দান্ত কারণ এটি আমাকে এমন একটি স্ট্রিং পাস করতে দেয় যা মার্কআপে যেমন দেখায় ঠিক তেমন।

— কেভিঙ্ক

5

মনে হচ্ছে কেউ কিছু উল্লেখ করেছেন যে আপনি একটি ফাংশন ব্যবহার করতে পারেন ARG2 মধ্যে $ ফিল্টার ( 'filtername') (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

প্রথমে আপনার কন্ট্রোলারে ইনজেকশন $ ফিল্টার করে এনজি সানাইটিজ আপনার অ্যাপের মধ্যে লোড করা হয়েছে তা নিশ্চিত করে পরে কন্ট্রোলারের ব্যবহার নীচে দেওয়া হয়:

$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 ফিল্টার পুনরায় ব্যবহার করা - দেখুন / নিয়ামক ler

এই সমাধানটি কৌনিক ফিল্টারগুলি পুনরায় ব্যবহার করে coveringেকে রাখছে। যা ডেটা ফিল্টার করার আর একটি উপায়, এবং যখন আমার যখন প্রয়োজন হয় তখন গুগল আমাকে এখানে নিয়ে আসে; এবং আমি ভাগ করতে চান।

ব্যবহারের ক্ষেত্রে

আপনি যদি ইতিমধ্যে ফিল্টারিং করে থাকেন তবে আপনার ভিউতে (নীচের মত) এনজি-রিপিট করে বলুন, তবে আপনি নিম্নলিখিতরূপে নিয়ামকটিতে একটি ফিল্টার সংজ্ঞায়িত করতে পারেন। এবং তারপরে আপনি চূড়ান্ত উদাহরণগুলির মতো পুনরায় ব্যবহার করতে পারেন।

ফিল্টার ব্যবহারের উদাহরণ - দেখুন ফিল্টার পুনরাবৃত্তি

<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 বিকল্প।

ভিউতে এবং $ ফিল্টার ফাংশন কলটিতে ব্যবহৃত alচ্ছিক তুলনামূলক প্যারামিটার "সত্য" আপনাকে নির্দিষ্ট করে তুলতে চান তা নির্দিষ্ট করে। যদি আপনি বাদ দেন, মানগুলি একাধিক কলামের জন্য অনুসন্ধান করা যেতে পারে।

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

— গ্রেগ
সূত্র

একটি নিয়ামক মধ্যে একটি ফিল্টার ব্যবহার কিভাবে?

এটি করার জন্য তিনটি সম্ভাব্য উপায় রয়েছে।