انگولار جی ایس فیلٹر

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) {
        سی = سی کی اپر کیو;
      }
      تکس += سی;
    }
    رفٹ رچ
  });
});
اپی کنٹرولر('نام کنٹرولر', فانکشن($سکوپ) {
  $سکوپ نام = ['جانی', 'کارل', 'مارگارٹھ', 'هجی', 'جوئے', 'گسٹاف', 'برگیت', 'میری', 'کائی'];
});
</سکریپٹ>

اپنے آپ پر کوشش کریئن

میری فورمات فیلٹر کا ہر ایک حرف کو بولی میں فورموٹ کیا جائے گا。