[英]Hide or Display an Item with Angular or Jquery?
i am using mvc. 我正在使用MVC。 I have model and i take data from model to view with this code: 我有模型,我使用以下代码从模型中获取数据:
<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>
After first 4 items, they should be hidden (display:none). 在前四个项目之后,应将其隐藏(显示:无)。 I searched angular and find ng-show attribute but cannot find how to use. 我搜索了angular并找到了ng-show属性,但是找不到如何使用。 Now my website looks like: 现在我的网站看起来像:
It should be one line and when i pressed next button, first item will hide and 5th item will show. 它应该是一行,当我按下下一步按钮时,第一项将隐藏,而第五项将显示。
I hope i can explain myself, thanks 我希望我能解释自己,谢谢
In Angular your HTML should be something like this to display only the first 4 items <li>
, where items
is your $scope.items
: 在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>
In Angular, try to use limitTo and offset filters. 在Angular中,尝试使用limitTo和offset过滤器。
Here's the Jsfiddle link . 这是Jsfiddle链接 。
AngularJS sample codes: AngularJS示例代码:
HTML : 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 Controller : 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);
};
});
Hope it helps. 希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.