انگولار جی ایس فیلٹر
- پچھلے پیجے انگولار جی ایس اسکوپ
- پچھلے پیجے انگولار جی ایس سروس
AngularJS ਵਿੱਚ ਫਿਲਟਰ ਜੋੜ ਕੇ ਤਬਦੀਲੀ ਕਰਨ ਸਕਦੇ ਹੋ ਸਨ
انگولار جی ایس فیلٹر
AngularJS ਫਿਲਟਰਾਂ ਨੂੰ ਤਬਦੀਲੀ ਕਰਨ ਲਈ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:
currency
ਸੰਖਿਆ ਨੂੰ ਨਕਦ ਫਾਰਮੈਟ ਵਿੱਚ ਫਾਰਮੈਟ ਕਰਨਾdate
ਤਾਰੀਖ ਨੂੰ ਨਿਰਧਾਰਿਤ ਫਾਰਮੈਟ ਵਿੱਚ ਫਾਰਮੈਟ ਕਰਨਾfilter
ਇਕੱਠੇ ਇਕੱਠੇ ਵਸਤੂ ਨੂੰ ਚੋਣ ਕਰਨਾjson
ਇਕੱਠੇ ਇਕੱਠੇ ਵਸਤੂ ਨੂੰ JSON ਪਾਠ ਵਿੱਚ ਫਾਰਮੈਟ ਕਰਨਾlimitTo
ਇੱਕ ਸ਼ਬਦ/ਪਾਠ ਨੂੰ ਇਕੱਠੇ ਇਕੱਠੇ ਸੀਮਤ ਕਰਨਾlowercase
ਪਾਠ ਨੂੰ ਛੋਟੀ ਲਿਖਤ ਵਿੱਚ ਫਾਰਮੈਟ ਕਰਨਾnumber
ਸੰਖਿਆ ਨੂੰ ਪਾਠ ਵਿੱਚ ਫਾਰਮੈਟ ਕਰਨਾorderBy
ਇਕਸੱਦੇ ਨਾਲ ਇਕੱਠੇ ਇਕੱਠੇ ਐਕਸਪ੍ਰੈਸ਼ਨ ਦੇ ਆਰੇਜਨ ਨੂੰ ਕਰਨਾuppercase
ਪਾਠ ਨੂੰ ਵੱਡੀ ਲਿਖਤ ਵਿੱਚ ਫਾਰਮੈਟ ਕਰਨਾ
ਇਕਸੱਦੇ ਨਾਲ ਫਿਲਟਰ ਜੋੜ ਕੇ ਐਕਸਪ੍ਰੈਸ਼ਨ ਵਿੱਚ ਫਿਲਟਰ ਜੋੜਨਾ
ਇੱਕ ਫਿਲਟਰ ਨੂੰ ਇਕਸੱਦੇ ਨਾਲ ਵਧਾ ਕੇ ਐਕਸਪ੍ਰੈਸ਼ਨ ਵਿੱਚ ਫਿਲਟਰ ਜੋੜ ਸਕਦੇ ਹੋ ਸਨ |
uppercase
ਫਿਲਟਰ ਪਾਠ ਨੂੰ ਵੱਡੀ ਲਿਖਤ ਵਿੱਚ ਫਾਰਮੈਟ ਕਰਦਾ ਹੈ:
ਮਾਡਲ
<div ng-app="myApp" ng-controller="personCtrl"> <p>ਨਾਮ ਹੈ {{ lastName | uppercase }}</p> </div>
lowercase
ਫਿਲਟਰ ਪਾਠ ਨੂੰ ਛੋਟੀ ਲਿਖਤ ਵਿੱਚ ਫਾਰਮੈਟ ਕਰਦਾ ਹੈ:
ਮਾਡਲ
<div ng-app="myApp" ng-controller="personCtrl"> <p>ਨਾਮ ਹੈ {{ lastName | lowercase }}</p> </div>
ਫਿਲਟਰ ਨੂੰ ਸਿਫ਼ਰੇ ਵਿੱਚ ਜੋੜੋ
ਪਾਈਪ ਚਿੱਨ ਦੇ ਵਰਤੋਂ ਨਾਲ |
ਬਾਅਦ ਫਿਲਟਰ ਨਾਲ, ਫਿਲਟਰ ਨੂੰ ਸਿਫ਼ਰੇ ਵਿੱਚ ਜੋੜ ਸਕਦੇ ਹਾਂ, ਉਦਾਹਰਣ ਵਜੋਂ ng-repeat
:
ਮਾਡਲ
orderBy ਫਿਲਟਰ ਗਿਣਤੀ ਨੂੰ ਕਰਜ਼ੀ ਕਰਦਾ ਹੈ:
<div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> </div>
currency ਫਿਲਟਰ
currency
ਫਿਲਟਰ ਨੰਬਰ ਨੂੰ ਨਕਦੀ ਫਾਰਮੈਟ ਵਿੱਚ ਫਾਰਮੈਟ ਕਰਦਾ ਹੈ:
ਮਾਡਲ
<div ng-app="myApp" ng-controller="costCtrl"> <h1>ਮੁੱਲ: {{ price | currency }}</h1> </div>
currency ਫਿਲਟਰ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ AngularJS currency ਫਿਲਟਰ ਮੈਨੂਅਲ ਦੇਖੋ
filter ਫਿਲਟਰ
filter
ਫਿਲਟਰ ਗਿਣਤੀ ਦੇ ਉਪਸੂਚੀ ਨੂੰ ਚੋਣ ਕਰਦਾ ਹੈ
filter
ਫਿਲਟਰ ਸਿਰਫ ਗਿਣਤੀਆਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਇਹ ਮੇਲ ਕਰਨ ਵਾਲੇ ਮਾਤਰ ਮੰਡਾਲ ਦੇਣਾ ਹੈ
ਮਾਡਲ
ਅੱਖਰ "i" ਵਾਲੇ ਨਾਮਾਂ ਨੂੰ ਵਾਪਸ ਦੇਣਾ:
<div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | filter : 'i'"> {{ x }} </li> </ul> </div>
filter ਫਿਲਟਰ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ AngularJS filter ਫਿਲਟਰ ਮੈਨੂਅਲ ਦੇਖੋ
ਯੂਜ਼ਰ ਇਨਪੁਟ ਦੇ ਅਧਾਰ 'ਤੇ ਗਿਣਤੀ ਨੂੰ ਫਿਲਟਰ ਕਰੋ
ਇਨਪੁਟ ਫੀਲਡ 'ਤੇ ਸੈਟ ਕਰਕੇ ng-model
ਸਿਫ਼ਰੇ, ਅਸੀਂ ਇਨਪੁਟ ਫੀਲਡ ਦੇ ਮੁੱਲ ਨੂੰ ਫਿਲਟਰ ਵਿੱਚ ਇਕਸਾਸ ਕਰ ਸਕਦੇ ਹਾਂ
ਇਨਪੁਟ ਫੀਲਡ ਵਿੱਚ ਇੱਕ ਅੱਖਰ ਲਿਖੋ, ਸੂਚੀ ਮੇਲ ਕਰਨ ਦੇ ਅਧਾਰ 'ਤੇ ਛੂਟ ਜਾਵੇਗੀ/ਵਧੇਗੀ:
- ਜਾਨੀ
- ਕਾਰਲ
- ਮਾਰਗਰੇਥ
- ਹੇਗੇ
- ਜੋ ਐ
- ਗੁਸਤਾਵ
- ਬਿਰਗਿਟ
- ਮੈਰੀ
- ਕਾਈ
ਮਾਡਲ
<div ng-app="myApp" ng-controller="namesCtrl"> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter : test"> {{ x }} </li> </ul> </div>
ਯੂਜ਼ਰ ਇਨਪੁਟ ਦੇ ਅਧਾਰ 'ਤੇ ਗਿਣਤੀ ਨੂੰ ਕਰਜ਼ੀ ਕਰਨ
ਸਿਫ਼ਟ ਹੈਡ ਨੂੰ ਕਲਿੱਕ ਕਰਕੇ ਕਰਜ਼ੀ ਕਰਜ਼ੀ ਕਰਨ ਦੀ ਕਰਜ਼ੀ ਕਰਨ
ਨਾਮ ਦੇਸ਼ ਜਾਨੀ ਨਾਰਵੇ ਕਾਰਲ ਸਵੀਡਨ ਮਾਰਗਰੇਥ ਇੰਗਲੈਂਡ ਹੇਗੇ ਨਾਰਵੇ ਜੋ ਐ ਡੈੱਨਮਾਰਕ ਗੁਸਤਾਵ ਸਵੀਡਨ ਬਿਰਗਿਟ ਡੈੱਨਮਾਰਕ ਮੈਰੀ ਇੰਗਲੈਂਡ ਕਾਈ ਨਾਰਵੇਤਹਿਤ ਸਿਫ਼ਟ ਹੈਡ ਸ਼ਾਮਲ ਕਰਕੇ ng-click
ਸਿਫ਼ਰੇ, ਅਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਚਲਾ ਸਕਦੇ ਹਾਂ ਜੋ ਗਿਣਤੀ ਦੀ ਕਰਜ਼ੀ ਕਰਦੇ ਹੋਣ
ਮਾਡਲ
<div ng-app="myApp" ng-controller="namesCtrl"> <table border="1" width="100%"> <tr> <th ng-click="orderByMe('name')">Name</th> <th ng-click="orderByMe('country')">Country</th> </tr> <tr ng-repeat="x in names | orderBy:myOrderBy"> <td>{{x.name}}</td> <td>{{x.country}}</td> </tr> </table> </div> <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Carl',country:'Sweden'}, {name:'Margareth',country:'England'}, {name:'Hege',country:'Norway'}, {name:'Joe',country:'Denmark'}, {name:'Gustav',country:'Sweden'}, {name:'Birgit',country:'Denmark'}, {name:'Mary',country:'England'}, {name:'Kai',country:'Norway'} ]; $scope.orderByMe = function(x) { $scope.myOrderBy = x; } }); </سکریپٹ>
ਪਸੰਦੀਦਾ ਫਿਲਟਰ
ਤੁਸੀਂ ਮੋਡਿਊਲ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਫਿਲਟਰ ਫੈਕਟਰੀ ਫੰਕਸ਼ਨ ਰਜਿਸਟਰ ਕਰ ਕੇ ਆਪਣਾ ਫਿਲਟਰ ਬਣਾ ਸਕਦੇ ਹੋ
ਮਾਡਲ
ਇੱਕ ਪਸੰਦੀਦਾ ਫਿਲਟਰ "myFormat" ਬਣਾਓ:
<ul ng-app="myApp" ng-controller="namesCtrl"> <li ng-repeat="x in names"> {{x | myFormat}} </li> </ul> <script> var app = angular.module('myApp', []); app.filter('myFormat', function() { رفٹ فانکشن(ایکس) {}} واریئبل آئی، سی، تکس = ""; برای (آئی = 0; آئی < ایکس لمبائی; آئی++) { سی = ایکس[آئی]; اگر (آئی % 2 == 0) { سی = سی کی اپر کیو; } تکس += سی; } رفٹ رچ }); }); اپی کنٹرولر('نام کنٹرولر', فانکشن($سکوپ) { $سکوپ نام = ['جانی', 'کارل', 'مارگارٹھ', 'هجی', 'جوئے', 'گسٹاف', 'برگیت', 'میری', 'کائی']; }); </سکریپٹ>
میری فورمات
فیلٹر کا ہر ایک حرف کو بولی میں فورموٹ کیا جائے گا。
- پچھلے پیجے انگولار جی ایس اسکوپ
- پچھلے پیجے انگولار جی ایس سروس