使用 ng-change Angular 隐藏元素

Hide elements with ng-change Angular

本文关键字：元素 隐藏 Angular ng-change 使用      更新时间：2023-09-26

我想使用 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 时显示第一个。
小提琴

不需要

ng-change，只需使用ng-if（或ng-show）来检查模型的状态：

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

小提琴（使用正确的结束标签，以便它实际工作）。

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

相关文章：