隐藏具有ng-change Angular的元素

时间:2015-01-05 13:01:18

标签: javascript html angularjs

我希望使用ng-change或您建议的任何内容来显示/隐藏表单中的元素。这是我的 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>  

例如,我想在用户点击选项1时显示第一个 的 Fiddle

2 个答案:

答案 0 :(得分:3)

无需ng-change,只需使用ng-if(或ng-show)来检查模型的状态:

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

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

Fiddle(正确的结束标记,以便它实际上有效)。

答案 1 :(得分:2)

我会使用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