AngularJS စာရင်း

ng-repeat အမိန့် အကြောင်းအရာ ကို ပြထား ရန် သူ့အတွက် ရေးသားထား

အစီအစဉ် အချက်အလက် ကို ပြထား

အင်္ဂလိပ်JS ကို ပြထား ရန် မျဉ်းကြီး နည်းလမ်း

AngularJS အကျိုးသတ္တု

<div ng-app="myApp" ng-controller="customersCtrl">

    <td>{{ x.အမည် }}</td>
    
{{ x.Country }}
</div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("customers.php") .then(function (response) {$scope.names = response.data.records;}); }); </script>

亲自试一试

CSS အဆင်း ကို ပြထား

ပြုပြင်ထား ရန် ဘာသာစကား ပေါင်းစပ်ထား ရန် သင်္ကြပ်သင်း

CSS အဆင်း

<style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>

亲自试一试

orderBy စစ်ဆေးသည့် အကြောင်းအရာ ကို ပြထား

တူးပြီး အစီအစဉ် ကို ပြထား ရန် သင်္ကြပ်သင်း orderBy စစ်ဆေးသည့် အကြောင်းအရာ:

AngularJS Example


  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ x.အမည် }}</td>
    
{{ x.Country }}

亲自试一试

uppercase စစ်ဆေးသည့် အကြောင်းအရာ ကို ပြထား

အမြောက်အမြား ကို အကြီးအကျယ် ပြထား ရန် သင်္ကြပ်သင်း uppercase စစ်ဆေးသည့် အကြောင်းအရာ:

AngularJS Example


    <td>{{ x.အမည် }}</td>
    <td>{{ x.နိုင်ငံ | uppercase }}</td>
  

亲自试一试

အစီအစဉ် ($index) ကို ပြထား

တူးပြီး အစီအစဉ် ကို သင်္ကြပ်သင်း $index အချက် <td>:

AngularJS Example


    <td>{{ $index + 1 }}</td>
    <td>{{ x.အမည် }}</td>
    
{{ x.Country }}

亲自试一试

使用 $even 和 $odd

AngularJS Example

{{ x.Name }} {{ x.Name }} {{ x.Country }} {{ x.Country }}

亲自试一试