ng-hide и ng-show без Javascript

Чтобы скрыть и отобразить некоторые меню без использования Javascript вообще в AngularJS. Я играл с ng-hide и ng-show, как показано ниже.ng-hide и ng-show без Javascript

<a ng-click="showmenu1=true">Menu 1</a> 
<a ng-click="showmenu2=true">Menu 2</a> 
<a ng-click="showmenu3=true">Menu 3</a> 

<form ng-show="showmenu1"> 
    <label> 1 </label> 
</form> 

<form ng-show="showmenu2"> 
    <label> 2 </label> 
</form> 

<form ng-show="showmenu3"> 
    <label> 3 </label> 
</form>

http://jsfiddle.net/39Lm68vj/4/

Обновленный вопрос: как сделать меню 2 и 3 исчезают, а меню 1 активен?

источник

2016-02-24 kevin_b

В минимуме, вы должны использовать 'нг-show', а не' нг -hide' ... – jcaron

Что такое ожидаемое поведение от всех этих объединений? – charlietfl

@charlietfl ничего не показывает, пока я не нажму на каждый –

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

<a ng-click="toggleMenu(1)">Menu 1</a> 
<a ng-click="toggleMenu(2)">Menu 2</a> 
<a ng-click="toggleMenu(3)">Menu 3</a> 

<form ng-show="model.showmenu == 1"> 
    <label> 1 </label> 
</form> 

<form ng-show="model.showmenu == 2" ng-cloak> 
    <label> 2 </label> 
</form> 

<form ng-show="model.showmenu == 3" ng-cloak> 
    <label> 3 </label> 
</form>

затем в контроллере

$scope.model = { 
    showmenu:1 
} 

$scope.toggleMenu = function(val){ 
    $scope.model.showmenu = val; 
}

DEMO

источник

2016-02-24 01:36:54 charlietfl

спасибо, но есть ли способ выполнить это без привлечения контроллера? –

не могли бы вы посмотреть на это: http://jsfiddle.net/39Lm68vj/4/ –

Почему бы вам не включить контроллер? Вам нужно будет бесполезно вкладывать вещи в корнеплод, и нет смысла делать это. Скрытие переменных в представлении просто затрудняет тестирование – charlietfl

В поле ng-click вам необходимо применить логику изменения состояний. Пожалуйста, обратите внимание на ng-init (но лучше, чтобы избежать этого)

<a ng-click="showmenu1=!showmenu1">Menu 1</a> 
<a ng-click="showmenu2=!showmenu2">Menu 2</a> 
<a ng-click="showmenu3=!showmenu3">Menu 3</a> 

<form ng-hide="!showmenu1"> 
    <label> 1 </label> 
</form> 

<form ng-hide="!showmenu2"> 
    <label> 2 </label> 
</form> 

<form ng-hide="!showmenu3"> 
    <label> 3 </label> 
</form>

здесь живой пример: http://jsfiddle.net/39Lm68vj/3/

источник

2016-02-24 01:23:16 JanisP

это также работает: http://jsfiddle.net/39Lm68vj/4/ –

однако что, если я хочу, чтобы меню 2 и 3 исчезли, когда меню 1 активно? С помощью скрипки я представил? –

@jebmarcus только несколько модификаций http://jsfiddle.net/Lzgs88cm/1/ – JanisP

Другое предложение

<a ng-click="menu=1">Menu 1</a> 
<a ng-click="menu=2">Menu 2</a> 
<a ng-click="menu=3">Menu 3</a> 

<form ng-show="menu == 1"> 
    <label> 1 </label> 
</form> 

<form ng-show="menu == 2"> 
    <label> 2 </label> 
</form> 

<form ng-show="menu == 3"> 
    <label> 3 </label> 
</form>

источник

2016-06-05 18:39:06 Vlant

ответ

Смежные вопросы