欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS 霸道的過(guò)濾器小結(jié)

 更新時(shí)間：2017年04月26日 14:19:58   作者：光明大神棍  
本篇文章主要介紹了AngularJS 霸道的過(guò)濾器小結(jié)，在實(shí)際操作中，我們需要對(duì)統(tǒng)一數(shù)據(jù)源進(jìn)行多次轉(zhuǎn)換，本文詳細(xì)討論有關(guān)過(guò)濾器的用法 。

一、為什么使用過(guò)濾器？

在實(shí)際操作中，我們需要對(duì)統(tǒng)一數(shù)據(jù)源進(jìn)行多次轉(zhuǎn)換，比如我的貨幣單位，在不同的國(guó)家我們將用不同的符號(hào)表示。因此，你可能會(huì)想到在控制器中判斷國(guó)家以顯示不同的結(jié)果，但是過(guò)濾器卻可以更好的幫助我們做到同樣的效果。

過(guò)濾器將數(shù)據(jù)在被指令處理并顯示到視圖之前進(jìn)行轉(zhuǎn)換，而不必修改作用域中原有的數(shù)據(jù)，這樣能夠允許同一份數(shù)據(jù)在應(yīng)用中的不同部分以不同形式得以展示。

接下來(lái)，我們?cè)敿?xì)討論有關(guān)過(guò)濾器的用法

二、過(guò)濾單個(gè)數(shù)據(jù)的值

下表展示用于單個(gè)數(shù)據(jù)的內(nèi)置過(guò)濾器

這里寫(xiě)圖片描述 

先來(lái)看看我們的準(zhǔn)備案例，待會(huì)我們將在這個(gè)案例的基礎(chǔ)上來(lái)使用內(nèi)容過(guò)濾器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>
    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <tr ng-repeat="p in products">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },
    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
})
</script>
</body>
</html>

就是一個(gè)表格的形式來(lái)展示產(chǎn)品的詳細(xì)情況的案例

這里寫(xiě)圖片描述

1.格式化貨幣值

<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <td>{{p.expiry}}</td>
  <!-- 使用currency -->
  <td>{{p.price | currency}}</td>
</tr>

這里寫(xiě)圖片描述

2.格式化數(shù)字值

<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <td>{{p.expiry}}</td>
  <!-- 保留小數(shù)點(diǎn)后3位 -->
  <td>{{p.price | number : 3}}</td>
</tr>

這里寫(xiě)圖片描述

3.格式化日期

// 在控制器中添加
$scope.getExpiryDate = function (days) {
  var now = new Date();
  return now.setDate(now.getDate() + days);
}
<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <!-- 在視圖中使用-->
  <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td>
  <!-- 貨幣單位本地化 -->
  <td>{{p.price}}</td>
</tr>

這里寫(xiě)圖片描述

4.改變字符串大小寫(xiě)

<tr ng-repeat="p in products">
  <!-- 字母大小寫(xiě) -->
  <td>{{p.name | uppercase}}</td>
  <td>{{p.category | lowercase}}</td>
  <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td>
  <!-- 貨幣單位本地化 -->
  <td>{{p.price}}</td>
</tr>

這里寫(xiě)圖片描述

5.生成JSON

<tr ng-repeat="p in products">
  <!-- 生成JSON數(shù)據(jù) -->
  <td>{{p.name | json}}</td>
  <td>{{p.category}}</td>
  <td>{{getExpiryDate(p.expiry) | date : 'yyyy/MM/dd'}}</td>
  <!-- 貨幣單位本地化 -->
  <td>{{p.price}}</td>
</tr>

這里寫(xiě)圖片描述

6.本地化過(guò)濾器輸出

需要移入本地化JS文件

<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<tr ng-repeat="p in products">
  <td>{{p.name}}</td>
  <td>{{p.category}}</td>
  <td>{{p.expiry}}</td>
  <!-- 貨幣單位本地化 -->
  <td>{{p.price | currency}}</td>
</tr>

這里寫(xiě)圖片描述

三、過(guò)濾集合

1.限制項(xiàng)目的數(shù)量—limitTo過(guò)濾器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>
    <div class="panel panel-body">
      Limit: <select ng-model="limitVal" ng-options="item for item in limitRange"></select>
    </div>
    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <!-- 只顯示limitVal行 -->
          <tr ng-repeat="p in products | limitTo : limitVal">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<script type="text/javascript">
var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },
    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
  // 顯示的條數(shù)
  $scope.limitVal = '5';
  // 在限制條數(shù)的范圍條項(xiàng)
  $scope.limitRange = [];
  for (var i = (0 - $scope.products.length); i <= $scope.products.length; i++) {
    $scope.limitRange.push(i.toString());
  }
})
</script>
</body>
</html>

單擊下拉列表，根據(jù)提示顯示不同的條數(shù)，負(fù)數(shù)表示從后往前取

這里寫(xiě)圖片描述

2.選取項(xiàng)—filter過(guò)濾器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <!-- 自定義過(guò)濾 -->
          <tr ng-repeat="p in products | filter : selectItems">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<script type="text/javascript">
var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },
    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
  // 自定義過(guò)濾器
  $scope.selectItems = function (item) {
    // 僅僅保留類(lèi)別為Fish或者name=='Beer'的行
    return item.category == 'Fish' || item.name == 'Beer';
  }

})
</script>
</body>
</html>

僅僅保留類(lèi)別為Fish或者name=='Beer'的行

這里寫(xiě)圖片描述

3.對(duì)項(xiàng)目進(jìn)行排序—orderBy過(guò)濾器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <!-- 通過(guò)價(jià)格按照升序排列 -->
          <!-- <tr ng-repeat="p in products | orderBy : 'price'"> -->
          <!-- price前加-表示按照降序排列 -->
          <!-- <tr ng-repeat="p in products | orderBy : '-price'"> -->
          <!-- 自定義排序 -->
          <!-- <tr ng-repeat="p in products | orderBy : customOrder"> -->
          <!-- 組合排序，保質(zhì)期<5的降序排列，其他的按照價(jià)格升序排序 -->
          <tr ng-repeat="p in products | orderBy : [customOrder, '-price']">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>

          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>
<script type="text/javascript">
var myApp = angular.module("exampleApp", []);
myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },

    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
  // 自定義函數(shù)排序
  $scope.customOrder = function (item) {
    // 保質(zhì)期<5的不排序，其他的按照價(jià)格升序排序
    return item.expiry < 5 ? 0 : item.price;
  }
})
</script>
</body>
</html>

保質(zhì)期<5的不排序，其他的按照價(jià)格升序排序

這里寫(xiě)圖片描述 

四、鏈?zhǔn)竭^(guò)濾器

就是將過(guò)濾器串聯(lián)起來(lái)綜合使用

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>
          <!-- 過(guò)濾鏈條，通過(guò)orderBy和limitTo共同作用 -->
          <tr ng-repeat="p in products | orderBy : [customOrder, '-price'] | limitTo : 5">
            <td>{{p.name}}</td>
            <td>{{p.category}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>

          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入本地化文件 -->
<script type="text/javascript" src="js/angular-locale_zh-cn.js"></script>

<script type="text/javascript">

var myApp = angular.module("exampleApp", []);

myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },

    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
  // 自定義函數(shù)排序
  $scope.customOrder = function (item) {
    // 保質(zhì)期<5的不排序，其他的按照價(jià)格升序排序
    return item.expiry < 5 ? 0 : item.price;
  }

})
</script>
</body>
</html>

先按照自定義customOrder函數(shù)以price倒序排列，然后只取得5條數(shù)據(jù)

<tr ng-repeat="p in products | orderBy : [customOrder, '-price'] | limitTo : 5">

這里寫(xiě)圖片描述

五、自定義過(guò)濾器

1.創(chuàng)建格式化數(shù)據(jù)值的過(guò)濾器

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
  <title>Angluar test</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</head>
<body>
  <dlv class="panel panel-default" ng-controller="defaultCtrl">
    <div class="panel panel-header">
      Products
      <span class="label label-primary">{{products.length}}</span>
    </div>

    <div class="panel panel-body">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr><th>Name</th><th>Category</th><th>Expiry</th><th>Price</th></tr>
        </thead>
        <tbody>

          <tr ng-repeat="p in products">
            <!-- 使用自定義過(guò)濾器 -->
            <td>{{p.name | labelCase}}</td>
            <td>{{p.category | labelCase : true}}</td>
            <td>{{p.expiry}}</td>
            <td>{{p.price | number : 2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>

<script type="text/javascript">

var myApp = angular.module("exampleApp", []);

myApp.controller("defaultCtrl", function ($scope) {
  $scope.products = [
    { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
    { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
    { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 },

    { name: "Tuna", category: "Fish", price: 20.45, expiry: 3 },
    { name: "Trout", category: "Fish", price: 12.93, expiry: 4 },
    { name: "Salmon", category: "Fish", price: 17.93, expiry: 2 },

    { name: "Beer", category: "Drinks", price: 2.99, expiry: 365 },
    { name: "Wine", category: "Drinks", price: 8.99, expiry: 365 },
    { name: "Whiskey", category: "Drinks", price: 45.99, expiry: 365 }
  ];
});
</script>
<!-- 引入自定義的過(guò)濾器 -->
<script type="text/javascript" src="js/createFilters.js"></script>
</body>
</html>

自定義過(guò)濾器，labelCase反轉(zhuǎn)字符串

// js/createFilters.js文件
angular.module("exampleApp")
  .filter("labelCase", function () {
    return function (value, reverse) {
      if (angular.isString(value)) {
        var inter = reverse ? value.toUpperCase() : value.toLowerCase();
        return (reverse ? inter[0].toLowerCase() : inter[0].toUpperCase()) + inter.substr(1);
      } else {
        return value;
      }
    }
  })

這里寫(xiě)圖片描述 

2.創(chuàng)建集合過(guò)濾器

在createFilter中定義一個(gè)skip過(guò)濾函數(shù)

angular.module("exampleApp")
  .filter("labelCase", function () {
    return function (value, reverse) {
      if (angular.isString(value)) {
        var inter = reverse ? value.toUpperCase() : value.toLowerCase();
        return (reverse ? inter[0].toLowerCase() : inter[0].toUpperCase()) + inter.substr(1);
      } else {
        return value;
      }
    }
  })
  .filter("skip", function () {
    return function (value, count) {
      if (angular.isArray(value) && angular.isNumber(count)){
        if (count > value.length || count < 0) {
          return value;
        } else {
          // 跳過(guò)數(shù)組前兩項(xiàng)
          return value.slice(count);
        }
      } else {
        return value;
      }
    }
  })

在視圖中使用

<tr ng-repeat="p in products | skip : 2">
  <!-- 使用自定義過(guò)濾器 -->
  <td>{{p.name | labelCase}}</td>
  <td>{{p.category | labelCase : true}}</td>
  <td>{{p.expiry}}</td>
  <td>{{p.price | number : 2}}</td>
</tr>

移除前兩項(xiàng)Apples和Bananas，然后顯示

這里寫(xiě)圖片描述

3.在已有的過(guò)濾器上搭建新的過(guò)濾器

在createFilter中添加take過(guò)濾器返回，將skip和limitTo兩個(gè)過(guò)濾器方法綜合起來(lái)

angular.module("exampleApp")
  .filter("labelCase", function () {
    return function (value, reverse) {
      if (angular.isString(value)) {
        var inter = reverse ? value.toUpperCase() : value.toLowerCase();
        return (reverse ? inter[0].toLowerCase() : inter[0].toUpperCase()) + inter.substr(1);
      } else {
        return value;
      }
    }
  })
  .filter("skip", function () {
    return function (value, count) {
      if (angular.isArray(value) && angular.isNumber(count)){
        if (count > value.length || count < 0) {
          return value;
        } else {
          // 跳過(guò)數(shù)組前兩項(xiàng)
          return value.slice(count);
        }
      } else {
        return value;
      }
    }
  })
  // 在已有過(guò)濾器的基礎(chǔ)上建立新的過(guò)濾器
  // 將上述的skip和limit兩個(gè)過(guò)濾器合并
  .filter("take", function ($filter) {
    return function (data, skipCount, limitCount) {
      // 先跳過(guò)數(shù)組的前skipCount項(xiàng)
      var skipData = $filter("skip")(data, skipCount);
      // 接著只取limitCount行
      return $filter("limitTo")(skipData, limitCount);
    }
  })

在視圖中使用：

<tr ng-repeat="p in products | take : 2 : 5">
<!-- 使用自定義過(guò)濾器 -->
  <td>{{p.name | labelCase}}</td>
  <td>{{p.category | labelCase : true}}</td>
  <td>{{p.expiry}}</td>
  <td>{{p.price | number : 2}}</td>
</tr>

先移除兩項(xiàng)，然后值取5條數(shù)據(jù)

這里寫(xiě)圖片描述

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • AngularJS 過(guò)濾與排序詳解及實(shí)例代碼

    AngularJS 過(guò)濾與排序詳解及實(shí)例代碼

    這篇文章主要介紹了AngularJS 過(guò)濾與排序，這里整理了詳細(xì)的資料及簡(jiǎn)單實(shí)例代碼，有需要的小伙伴可以參考下
    2016-09-09
  • Angular應(yīng)用Bootstrap過(guò)程步驟邏輯詳解

    Angular應(yīng)用Bootstrap過(guò)程步驟邏輯詳解

    這篇文章主要為大家介紹了Angular應(yīng)用Bootstrap過(guò)程步驟邏輯詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-07-07
  • Angular 2父子組件數(shù)據(jù)傳遞之局部變量獲取子組件其他成員

    Angular 2父子組件數(shù)據(jù)傳遞之局部變量獲取子組件其他成員

    這篇文章主要給大家介紹了關(guān)于Angular 2父子組件之間數(shù)據(jù)傳遞之局部變量獲取子組件其他成員的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
    2017-07-07
  • angularjs結(jié)合html5實(shí)現(xiàn)拖拽功能

    angularjs結(jié)合html5實(shí)現(xiàn)拖拽功能

    本篇文章給大家分享了angularjs結(jié)合html5實(shí)現(xiàn)拖拽功能的方法以及代碼實(shí)例，有興趣的朋友參考下。
    2018-06-06
  • AngularJS入門(mén)教程之更多模板詳解

    AngularJS入門(mén)教程之更多模板詳解

    本文主要介紹AngularJS模板的資料知識(shí)，這里幫大家整理了詳細(xì)的模版資料，及實(shí)現(xiàn)示例代碼，幫助大家學(xué)習(xí)AngularJS的知識(shí)，有需要的小伙伴可以參考下
    2016-08-08
  • 詳解Angular中$cacheFactory緩存的使用

    詳解Angular中$cacheFactory緩存的使用

    這篇文章主要介紹了Angular中$cacheFactory緩存的使用,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2016-08-08
  • ionic使用angularjs表單驗(yàn)證（模板驗(yàn)證）

    ionic使用angularjs表單驗(yàn)證（模板驗(yàn)證）

    能夠驗(yàn)證用戶(hù)在表單中輸入的內(nèi)容是否合理與正確是十分重要的，這篇文章主要介紹了ionic使用angularjs表單驗(yàn)證（模板驗(yàn)證），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-12-12
  • AngularJS入門(mén)教程之ng-class 指令用法

    AngularJS入門(mén)教程之ng-class 指令用法

    本文主要介紹AngularJS ng-class 指令,這里幫大家整理了ng-class資料和示例代碼,學(xué)習(xí)AngularJS指令的同學(xué)可以參考下
    2016-08-08
  • AngularJS表格添加序號(hào)的方法

    AngularJS表格添加序號(hào)的方法

    這篇文章主要介紹了AngularJS表格添加序號(hào)的方法,涉及AngularJS表格的遍歷及序號(hào)添加實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2017-03-03
  • Angular resolve基礎(chǔ)用法詳解

    Angular resolve基礎(chǔ)用法詳解

    resolve保證了數(shù)據(jù)獲取后再進(jìn)行路由跳轉(zhuǎn)，防止因?yàn)閿?shù)據(jù)延遲而出現(xiàn)短暫的空組件情況，本文就介紹一下Angular resolve基礎(chǔ)用法，感興趣的小伙伴們可以參考一下
    2018-10-10

最新評(píng)論