隱藏或顯示帶有Angular或Jquery的項目？

Question

我正在使用mvc。我有模型和我從模型數據，以查看與該代碼：

<ul> 
    <li id="geri"><<</li> 

    @foreach (var item in Model.Skills) 
    { 
     <li id="@String.Format("{0}{1}", "skill", item.SkillId)"> 
     @item.SkillName 
     </li> 
    } 

    <li id="ileri" style="margin-right: 0;">>></li> 
</ul> 

後前4個條目，它們應該被隱藏（顯示：無）。我搜索角度並找到ng-show屬性，但無法找到如何使用。現在我的網站看起來像：

它應該是一條線，當我按下一個按鈕，第一個項目將隱藏和第5項將顯示。

我希望我可以解釋一下，謝謝

Answer 1

在Angular中，嘗試使用limitTo和偏移量過濾器。

這是Jsfiddle link。

AngularJS樣本代碼：

HTML：

<div ng-app="myApp"> 
    <ul ng-controller="YourCtrl"> 
     <li ng-click="previousSkills()"><<</li> 
     <li ng-repeat="skill in skills | offset: currentPage * 4 | limitTo: 4"> 
      {{skill.SkillName}} 
     </li> 
     <li ng-click="nextSkills()">>></li> 
    </ul> 
</div> 

AngularJS控制器：

'use strict'; 

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

app.controller('YourCtrl', ['$scope', function ($scope) { 

    $scope.currentPage = 0; 

    $scope.skills = [ 
     {SkillName:'C#'}, 
     {SkillName:'MVC'}, 
     {SkillName:'Web Forms'}, 
     {SkillName:'Web API'}, 
     {SkillName:'SignalR'}, 
     {SkillName:'EF'}, 
     {SkillName:'Linq'}, 
     {SkillName:'Github'}, 
     {SkillName:'Html'}, 
     {SkillName:'CSS'}, 
     {SkillName:'SQL'}, 
     {SkillName:'Angular'}, 
     {SkillName:'Azure'} 
     ]; 

    $scope.previousSkills = function() { 
     $scope.currentPage = $scope.currentPage - 1; 
    }; 

    $scope.nextSkills = function() { 
     $scope.currentPage = $scope.currentPage + 1; 
    }; 
}]); 

app.filter('offset', function() { 
    return function(input, start) { 
    start = parseInt(start, 10); 
    return input.slice(start); 
    }; 
}); 

希望它有幫助。

Answer 2

在角你的HTML應該是這樣的，只顯示前4項<li>，其中items是您$scope.items：

<ul> 
    <li id="geri"><<</li> 
    <li ng-repeat="(key, item) in items" ng-show="key <= 3">{{item.SkillName}}</li> 
    <li id="ileri" style="margin-right: 0;">>></li> 
</ul> 

JSFiddle here