Bootstrap AngularJS Скрыть ul, если нет

Question

Bootstrap AngularJS Скрыть ul, если нет

0

Есть ли способ использовать ng-hide или ng-if (т.е. Внутри элемента, а не контроллера), чтобы скрыть # navbar-nav ul, если у него нет li или visible li?

Возможно, это можно расширить, чтобы скрыть кнопку переключения, так как нет ничего, что можно было бы показать.

В настоящее время, если элементов списка нет, вы можете переключать (перемещать вверх и вниз) навигационную панель, и это выглядит не очень хорошо.

Большинство других вопросов, которые я видел, касались ng-repeat

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav" id="navbar-nav">
        <li class="active hidden-xs">
          <a href="#">Home</a>
        </li>
        <li class="hidden-xs">
          <a href="#products">Products</a>
        </li>
        <li class="hidden-xs">
          <a href="#overview">Overview</a>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>

JSFiddle

Ali 26 март 2016, в 05:17

Источник

0

почему вы хотите использовать ng-show, ng-if, когда ваше меню статично, а не углово? Вы уже использовали «hidden-xs» в своем пункте меню, почему бы вам не поставить «hidden-xs» на кнопку переключения, поскольку вы уже знаете, что на xs не будет li.
sdfacre 26 март 2016, в 04:19
0

Это был просто пример. Сокрытие их динамично. Если есть больше, чем эти элементы списка, я хочу, чтобы раскрывающийся список по-прежнему функционировал должным образом.
Ali 26 март 2016, в 14:40

Теги:

html

angularjs

css

angular-ng-if

ng-hide

1 ответ

Ещё вопросы

почему вы хотите использовать ng-show, ng-if, когда ваше меню статично, а не углово? Вы уже использовали «hidden-xs» в своем пункте меню, почему бы вам не поставить «hidden-xs» на кнопку переключения, поскольку вы уже знаете, что на xs не будет li.
Это был просто пример. Сокрытие их динамично. Если есть больше, чем эти элементы списка, я хочу, чтобы раскрывающийся список по-прежнему функционировал должным образом.

Justin Ober · Accepted Answer · 2016-03-26T03-41-00.000Z

Есть несколько вещей, которые нам нужно затронуть здесь. Во-первых, вся причина, по которой вы используете угловой, - это привязка данных для манипулирования/заполнения представления. С учетом сказанного вам нужно иметь что-то для ng-if/ng-show/ng-hide для проверки. И здесь находится контроллер. Контроллер должен содержать информацию, чтобы можно было управлять видом. Поэтому в этом случае мы захотим создать контроллер, в котором есть переменная, содержащая элементы списка меню:

app.controller('navCtrl', function(){
  this.menuItems = [
    { name: 'Home', href: '' },
    { name: 'Products', href: '' },
    { name: 'Overview', href: '' }
  ];
});

Теперь, когда это будет сделано, нам нужно привязать его к nav:

<div ng-controller="navCtrl as nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">.... </div>

Затем элементы nav li должны иметь ng-repeat на них, чтобы вы могли заполнить ul

<ul class="nav navbar-nav">
  <li ng-repeat="navItem in nav.menuItems">
    <a ng-href="{{ navItem.href }}">{{ navItem.name }}</a>
  </li>
</ul>

Теперь вы можете начать делать то, что вы просите. Просто добавьте ng-if это проверка, есть ли элементы nav:

<ul class="nav navbar-nav" ng-if="nav.menuItems.length > 0"> ... </ul>

Вы также можете сделать это в меню переключения:

<button ng-if="nav.menuItems.length > 0" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ... </button>

Итак, теперь, если контроллеры menuItems являются пустым массивом this.menuItems = [] ul и button не будет создана.

Это приводит меня к пункту 2. Единственный способ, с помощью которого это имеет смысл, - это заполнить пункты меню с помощью service или вызова API какого-либо рода или если вы можете динамически создавать/удалять навигационные элементы. Если вы жестко кодируете массив в контроллере и не манипулируете им, вы знаете, что значения будут присутствовать, и для этого нет оснований.

Мой последний момент в этой реализации заключается в том, чтобы удалить class="hidden-xs" из li в соответствии с этой реализацией, элементы навигации не будут отображаться, даже если они присутствуют, когда viewport является xs.

Вот скрипка, чтобы проверить полную реализацию: http://jsfiddle.net/9shaakw9/2/

Надеюсь это поможет!

Благодарю. Я изменю свой подход и использую этот. Спасибо!