使用 Angular 或 Jquery 隐藏或显示项目？答案

【问题标题】：Hide or Display an Item with Angular or Jquery?使用 Angular 或 Jquery 隐藏或显示项目？
【发布时间】：2015-06-21 10:10:26
【问题描述】：

我正在使用 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 个项目之后，它们应该被隐藏（显示：无）。我搜索了 angular 并找到了 ng-show 属性，但找不到如何使用。现在我的网站看起来像：

它应该是一行，当我按下下一个按钮时，第一项将隐藏，第五项将显示。

希望我能解释一下，谢谢

【问题讨论】：

你能提供一个 jsfiddle 链接吗？

标签： javascript jquery html asp.net-mvc angularjs

【解决方案1】：

在 Angular 中，尝试使用 limitTo 和 offset 过滤器。

这是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);
  };
});

希望对您有所帮助。

【讨论】：

【解决方案2】：

在 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>

JSFiddle here

【讨论】：

是否有可能将数据从模型发送到 .js 范围？