0

Помогите пожалуйста ограничить вывод количества элементов в списке до двух

jsfiddle

html:

<div ng-app="newsFeed">
  <div ng-controller="newsFeedController">
    <ul class="news_list">
      <li ng-repeat="newsItem in news | limitTo:2">
        <div class="title">{{ newsItem.title }}</div>
      </li>
    </ul> 
  </div>
</div>

js:

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

newsFeed.factory('initDataService', function(){
    return{
        initData:{
            "values":{
                "id1": {"title":"Lorem ipsum dolor sit.", "poster": "1.jpg", "description": "Lorem ipsum dolor sit amet, consectetur adssumenda expedita molestias tenetur, quam nostrum nisi praesentium necessitatibus doloribus!"},
                "id2": {"title":"Nobis delectus deleniti, amet.", "poster": "2.jpg", "description": "Fuga, porro, nemo. Ut, nisi reicieum tempore."},
                "id3": {"title":"Sequi alias, cur! Sapiente sit esse ipsa! Doloremque voluptates pariatur non eaque laborum."},
                "id4": {"title":"Odit tempora temporicia eius voluptates magnam quam similique, accusantium consequatur."},
                "id5": {"title":"Recusandae possimus qui tempore."},
                "id6": {"title":"Placeat enim, facilis molestiae.", "poster": "6.jpg", "description": "Consectetur aperiam nam esse earum, repudiandae, ta impedit! Illum, assumenda?"},
            }
        }
    };
})

var newsFeedModule = angular.module('newsFeed');

newsFeedModule.controller('newsFeedController', function($scope, initDataService) {
    $scope.posterWidth = 100;
    $scope.posterHeight = 60;

    $scope.news = initDataService.initData.values;
});
5
  • и в чем проблема? А, увидел, - поменять "values" на массив и все заработает
    – Grundy
    30 авг 2016 в 8:01
  • так? jsfiddle.net/q209o0gm/19 не заработало
    – cyklop77
    30 авг 2016 в 8:10
  • естественно не заработает, синтаксическая ошибка же
    – Grundy
    30 авг 2016 в 8:11
  • ааа.. ну это все данные нужно перелопатить. а если их миллион строк будет?
    – cyklop77
    30 авг 2016 в 8:14
  • а они вручную разве собираются?
    – Grundy
    30 авг 2016 в 8:16

2 ответа 2

2

Фильтр limitTo работает только с массивами. Так как в данном случае используется объект - он его же и возвращает.

Решение может быть множество: от фильтрации в контроллере перед выводом так как нужно, до написания собственного фильтра.

Фильтр может выглядеть так:

filter('objectProplimitTo', function() {
  return function(obj, count) {
    var res = [];
    for (var p in obj) {
      if (res.length == count) return res;
      res.push(obj[p]);
    }
  }
  return res;
})

Рабочий пример:

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

newsFeed.factory('initDataService', function() {
  return {
    initData: {
      "values": {
        "id1": {
          "title": "Lorem ipsum dolor sit.",
          "poster": "1.jpg",
          "description": "Lorem ipsum dolor sit amet, consectetur adssumenda expedita molestias tenetur, quam nostrum nisi praesentium necessitatibus doloribus!"
        },
        "id2": {
          "title": "Nobis delectus deleniti, amet.",
          "poster": "2.jpg",
          "description": "Fuga, porro, nemo. Ut, nisi reicieum tempore."
        },
        "id3": {
          "title": "Sequi alias, cur! Sapiente sit esse ipsa! Doloremque voluptates pariatur non eaque laborum."
        },
        "id4": {
          "title": "Odit tempora temporicia eius voluptates magnam quam similique, accusantium consequatur."
        },
        "id5": {
          "title": "Recusandae possimus qui tempore."
        },
        "id6": {
          "title": "Placeat enim, facilis molestiae.",
          "poster": "6.jpg",
          "description": "Consectetur aperiam nam esse earum, repudiandae, ta impedit! Illum, assumenda?"
        },
      }
    }
  };
})

var newsFeedModule = angular.module('newsFeed');

newsFeedModule.controller('newsFeedController', function($scope, initDataService) {
  $scope.posterWidth = 100;
  $scope.posterHeight = 60;

  $scope.news = initDataService.initData.values;
}).filter('objectProplimitTo', function() {
  return function(obj, count) {
    var res = [];
    for (var p in obj) {
      if (res.length == count) return res;
      res.push(obj[p]);
    }
  }
  return res;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="newsFeed">
  <div ng-controller="newsFeedController">
    <ul class="news_list">
      <li ng-repeat="newsItem in news | objectProplimitTo:2">
        <div class="title">{{ newsItem.title }}</div>
      </li>
    </ul>
  </div>
</div>

2

Не самое лучшее решение, но будет работать как надо:

$scope.news=[
    {"title":initDataService.initData.values[0].title},
    {"title":initDataService.initData.values[1].title}
];

Если надо больше, то циклом по initDataService.initData.values пройдись.

На мой взгляд, самым лучшим будет создать метод в твоем сервисе который возвращает 2 элемента, и с сервера подтягивать лишь 2.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.