Скрыть и показать содержимое Angular

Question

Я пытаюсь создать форму для пользователей, которые забыли свои данные для входа. Есть три переключателя, и когда пользователь нажимает на переключатель и нажимает «ОК», весь контент скрывается, и отображается новая форма для выбранного им варианта. Ниже html:

<div id="MainContent"> 
    <form ng-submit=""> 
     <label><input type="radio" name="dataForgotten" id="unForgotten"/>Forgot username</label> 
     <label><input type="radio" name="dataForgotten" id="pwForgotten"/>Forgot password</label> 
     <label><input type="radio" name="dataForgotten" id="bothForgotten"/>Forgot both username and pw</label> 

     <input type="submit" value="OK"> 
     <input type="submit" value="Cancel"> 
    </form> 
</div> 

Как я могу это сделать с угловым? У меня очень мало опыта работы с Angular, поэтому я очень благодарен за помощь.

Заранее благодарен!

Answer 1

Есть два способа для достижения желаемого эффекта.

1. Использование ng-if
2. Использование ng-show или ng-hide

Разница заключается в том, ng-if удаляет/воссоздает часть дерева DOM, основанный на экспрессии Boolean т.е. true или false значений. С другой стороны, ng-show просто скрывает часть, основанную на значении выражения. Он устанавливает отображение той части DOM, которой нет.

Для вашего случая я бы отдал предпочтение ng-if, так что только нужная часть DOM загрузится в приложение в нужное время. Некоторые утверждают, что, изменяя выражения в web-inpsector, можно включить или отключить блок ng-show.

Адрес Отредактировано. Я включил плункер. вот ссылка http://plnkr.co/edit/JB4LAgo9rqtPnPZHpwWr?p=preview

<label><input type="radio" value="unForgotten" ng-model="dataForgotten"/> Forgot username</label> 
<br/> 

<label><input type="radio" value="pwForgotten" ng-model="dataForgotten"/>Forgot password</label> 
<br/> 
<label><input type="radio" value="bothForgotten" ng-model="dataForgotten"/>Forgot both username and pw</label> 


<div ng-if="dataForgotten == 'unForgotten'"> 
    <!-- If Username Forgotten then Content goes here--> 
    Username Forgotten 
</div> 


<div ng-if="dataForgotten == 'pwForgotten'"> 
    <!-- If Password Forgotten then Content goes here--> 
    Password Forgotten 
</div> 

<div ng-if="dataForgotten == 'bothForgotten'"> 
    <!-- If Both Forgotten then Content goes here--> 
    Both Forgotten 
</div> 

Вот объяснение на документы в отношении ng-if https://docs.angularjs.org/api/ng/directive/ngIf

Хотя здесь документация для ng-showhttps://docs.angularjs.org/api/ng/directive/ngShow

Answer 2

Если вы хотите, чтобы он в простом JavaScript:

<a href="#" onclick="hide('MainContent')">Close</a> 

function show(target) { 
    document.getElementById(target).style.display = 'block'; 
} 

function hide(target) { 
    document.getElementById(target).style.display = 'none'; 
} 

Answer 3

Вы можете использовать ng-show для этого. Директива оценивает логическое условие и показывает содержимое, когда оно истинно, поэтому, чтобы скрыть один раздел и показать другой, вам просто нужен обратный.

<div ng-show="!completed"> 
    First Section 
</div> 

<div ng-show="completed"> 
    Second Section 
</div> 

на вашем $scope, вы будете иметь булев completed свойство (или что вы хотите назвать это), и вы можете изменить это в вашем контроллере при нажатии на кнопку с помощью ng-click.

<button ng-click="changeCompleted()">Show/Hide</button> 

Контроллер:

$scope.changeCompleted = function(){ 
    $scope.completed = !$scope.completed; 
} 

* Примечание вы можете также сократить эту часть, выполняя задание непосредственно в ng-click директиве.

Работает jsfiddle example.

ng-show docs

Кроме того, если вы хотите, чтобы убедиться, что переключатель проверяется перед разрешением на кнопку, чтобы быть нажата, взгляните на ng-disabled, которая позволяет условно отключить/включить вашу кнопку.

Answer 4

<div id="MainContent"> 
<form ng-submit="formsubmit(dataForgotten)"> 
    <label><input type="radio" ng-model="dataForgotten" id="unForgotten"/>Forgot username</label> 
    <label><input type="radio" ng-model="dataForgotten" id="pwForgotten"/>Forgot password</label> 
    <label><input type="radio" ng-model="dataForgotten" id="bothForgotten"/>Forgot both username and pw</label> 

    <input type="submit" value="OK"> 
    <input type="submit" value="Cancel"> 
</form> 

<form name="secondForm" ng-show="submited"> 
</form> 

</div> 

// контроллер код

$scope.submited=false; 
$scope.formsubmit = { 
//form value insert code here 
$scope.submited=true; 
};