以角度連續顯示5個產品

我編寫了以下代碼以在頁面上顯示某些產品，但我的動機是僅顯示連續5個項目。以角度連續顯示5個產品

我用於顯示所有產品代碼：

<div class="wrapper wrapper-content animated fadeInRight"> 
     <div class="row"> 
     <div class="col-md-2" data-ng-repeat="prod in products"> 
      <div class="ibox"> 
      <div class="ibox-content product-box"> 
       <div class="product-imitation"> 
       <img class="product-image" src="{{prod.productImage}}" /> 
       </div> 
       <div class="product-desc"> 
       <small class="text-muted">{{prod.productDesc}}</small> <a 
        href="#/" class="product-name"> {{prod.productName}}</a> 
       <div class="m-t text-righ"> 
        <a href="#/" 
        class="btn btn-xs btn-outline btn-primary animation_select" 
        data-animation="flipInY">Buy Now<i 
        class="fa fa-long-arrow-right"></i> 
        </a> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div>

我無法弄清楚如何在一排只顯示5個產品。

來源

2015-10-07 Rajat Nigam

使用AngularJS limitTo選項與ng-repeat。

的index.html

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="mainCtrl"> 
    <h1>Hello Plunker!</h1> 

Total objects in an array: {{ArrVals.length}} 

    <p>Displayed 2 objects only</p> 
    <div ng-repeat="ArrVal in ArrVals | limitTo:2"> 
     {{ArrVal}} 
    </div> 
    </body> 

</html>

的script.js

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

myApp.controller('mainCtrl', function($scope){ 
    $scope.ArrVals = [ 
    {val:1, name: 'A'}, 
    {val:2, name: 'A'}, 
    {val:3, name: 'A'}, 
    {val:4, name: 'A'}, 
    {val:5, name: 'A'}, 
    {val:6, name: 'A'}, 
    ]; 
})

工作Plnkr碼 - http://plnkr.co/edit/nRdGZXhMm9nGlwPO5aKf?p=preview

來源

2015-10-07 09:07:17 Nesh

您可以使用limitTo：5納克重複。

納克重複= 「中的項目項| limitTo：5」

[工作plunker] [1]

[1]：http://plnkr.co/edit/zWc4hDIMUZ38rGt8TMel?p=preview<body ng-controller="MainCtrl"> Hello {{name}} <div ng-repeat = "item in items | limitTo: 5">{{item}}</div> </body>

來源

2015-10-07 09:32:51 92sharmasaurabh

只顯示5個元素其餘元素將被忽略 –

以角度連續顯示5個產品

回答

相關問題