Hide items with ng-change Angular

I want to show / hide an element in a form with ng-change or any other suggestion. here is my html :

<div ng-app ng-controller="Controller">
    <select ng-model="myDropDown" ng-change="changeState(0)">
          <option value="one">One</option>
          <option value="two">Two</option>
    </select>

    <div class="row-container">
        first One
        <span class="sp-right">       
            <label>
                1
            </label>
        </span>
        <span class="sp-left">
        <input type="text">
        </span>


    <div class="row-container">
        second One
        <span class="sp-right">       
            <label>
                2
            </label>
        </span>
        <span class="sp-left">
        <input type="text">
        </span>  

For example, I want to show the first when the user clicks on option 1. Fiddle

+4
source share
2 answers

No need to ng-change, just use ng-if(or ng-show) to check the state of the model:

<div class="row-container" ng-if="myDropDown == 'one'">

<div class="row-container" ng-if="myDropDown == 'two'">

Fiddle (with proper closing tags so that it really works).

+3
source

ng-switch. div, , ng-switch-default. div , ng-switch-when= ng-switch-default

<div ng-app ng-controller="Controller" ng-switch on="myDropDown">
    <select ng-model="myDropDown">
          <option value="one">One</option>
          <option value="two">Two</option>
    </select>

    <div class="row-container" ng-switch-when="one">
        first One
        <span class="sp-right">       
            <label>
                1
            </label>
        </span>
        <span class="sp-left">
        <input type="text">
        </span>
    </div>

    <div class="row-container" ng-switch-when="two">
        second One
        <span class="sp-right">       
            <label>
                2
            </label>
        </span>
        <span class="sp-left">
        <input type="text">
        </span>
    </div>
</div>

http://plnkr.co/edit/QNdMxmYjR5LhsNvsHPpJ?p=preview

+2

Source: https://habr.com/ru/post/1569987/


All Articles