[英]Hide or Display an Item with Angular or Jquery?
我正在使用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>
在前四個項目之后,應將其隱藏(顯示:無)。 我搜索了angular並找到了ng-show屬性,但是找不到如何使用。 現在我的網站看起來像:
它應該是一行,當我按下下一步按鈕時,第一項將隱藏,而第五項將顯示。
我希望我能解釋自己,謝謝
在Angular中,您的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>
在Angular中,嘗試使用limitTo和offset過濾器。
這是Jsfiddle鏈接 。
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);
};
});
希望能幫助到你。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.