угловой ng-повторить вертикально с изменением столбца на основе изменения размера окна

У меня есть форма, которая имеет поле поиска и поле фильтра, которое сужает результаты. Данные разделены на 3 группы (каждая группа соответствует фильтру). Под каждой группой находятся столбцы данных (строки), которые соответствуют тому, что введено в поле поиска (пустое поле показывает все, а то, что не соответствует, скрыто).

Теперь, 1) итерация идет вертикально в алфавитном порядке. Первый столбец заполняется, затем переходит во второй столбец и так далее.
2) требуется, чтобы столбцы отвечали на изменение размера окна. Поэтому меньшее окно = меньше столбцов и большее окно = больше столбцов…

Я использую ng-repeatих и предварительно фильтрую / предварительно форматирую все результаты в контроллере на основе событий поиска/фильтрации/изменения размера, затем я передаю 2-мерные массивы в представление(html).

Есть ли лучший подход?
Я посмотрел множество вопросовng-repeat, и они в основном указывают на преформирование в контроллере. То, что они не учитывают, однако, является изменение размера столбца поверх этого. Я реализовал это, и это довольно медленно.

Спасибо за чтение и надеюсь получить некоторые советы.

1 ответ

  1. Я не могу дать вам полный ответ на этот вопрос (пока) мне придется немного поискать себя. Но то, что вы можете попробовать, это использовать columnsсвойство в css.

    Например вы используете:

    angular.module("myapp", [])
      .controller('testctrl', function($scope) {
        $scope.list = ['test', 'test2', 'foo', 'bar', 'fus', 'ro', 'dah'];
      });
    ul {
      columns: 2;
      -webkit-columns: 2;
      -moz-columns: 2;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <ul ng-app="myapp" ng-controller="testctrl">
      <li ng-repeat="result in list">{{result}}</li>
    </ul>

    Количество столбцов для размера окна можно изменить с помощью javascript и манипулировать числом позади columns