如何在角度js中显示/隐藏两个不同的div下拉选择？

时间：2017-11-07 05:34:39

标签： angularjs

我有两个不同的div和基于下拉选择如果是 general-1 div show和 general-2 div hide，如果选择No general-2 div show和general-1 div hide。

请使用angular js为我提供正确的解决方案，我的示例代码如下所示。

我是 angular Js 的新手，所以请为我提供简单的方法来解决这些功能，以便更多地了解此代码。

＆＃13;
＆＃13; 
   <html>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="col-md-12" style="padding:5px">
    <div class="col-md-12">
        <label class="label-head">Phd Guide</label>
        <select name="phd_guide" class="form-control" required ng-model="myVar">
            <option value="">---Choose Phd Guide---</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
</div>


<div class="col-md-12" style="padding:5px" id="general-1" ng-hide="myVar">
    <div class="col-md-3">
        <label class="label-head">Guide since</label>
        <input type="text" class="form-control" name="guide_since" placeholder="Guide Since" required>
    </div>
    <div class="col-md-3">
        <label class="label-head">Present Phd Scholars</label>
        <input type="text" class="form-control" name="phd_scholar" placeholder="Phd Scholar" required>
    </div>
    <div class="col-md-3">
        <label class="label-head">Phd Scholars Guided</label>
        <input type="text" class="form-control" name="phd_scholar_guide" placeholder="Phd Scholars Guided" required>
    </div>
    <div class="col-md-3">
        <label class="label-head">Subject Trust Area Involved</label>
        <input type="text" class="form-control" name="sub_trust_area_inv" placeholder="Subject trust area involved" required>
    </div>

</div>

<div class="col-md-12" style="padding:5px" id="general-2">
    <div class="col-md-2">
        <label class="label-head">H index Scopus</label>
        <input type="text" class="form-control" name="guide_since" placeholder="H index Scopus" required>
    </div>
    <div class="col-md-3">
        <label class="label-head">I10 Index Scopus</label>
        <input type="text" class="form-control" name="i10_index_of_scholar" placeholder="I10 Index Scopus" required>
    </div>
    <div class="col-md-2">
        <label class="label-head">H-Index Google Scholar</label>
        <input type="text" class="form-control" name="h_index_of_google_scholar" placeholder="H-Index Google Scholar" required>
    </div>
    <div class="col-md-3">
        <label class="label-head">I10-index Google Scholar</label>
        <input type="text" class="form-control" name="i10_index_of_google_scholar" placeholder="I10-index Google Scholar" required>
    </div>
    <div class="col-md-2">
        <label class="label-head">Link of Google Scholar</label>
        <input type="text" class="form-control" name="link_of_google_scholar" placeholder="Link of Google Scholar" required>
    </div>

</div>


</body>

</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：6)

您可以简单地使用ng-if

＆＃13;
＆＃13; 
var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
   $scope.myVar='yes';
})
＆＃13; 
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 </head>
<body ng-app="myApp" ng-controller="myCtrl">

   
    <div class="col-md-12" style="padding:5px">
        <div class="col-md-12">
            <label class="label-head">Phd Guide</label>
            <select name="phd_guide" class="form-control" required ng-model="myVar">
                <option value="">---Choose Phd Guide---</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
        </div>
    </div>


    <div ng-if="myVar === 'yes'" class="col-md-12" style="padding:5px" id="general-1" >
        <div class="col-md-3">
            <label class="label-head">Guide since</label>
            <input type="text" class="form-control" name="guide_since" placeholder="Guide Since" required>
        </div>
        <div class="col-md-3">
            <label class="label-head">Present Phd Scholars</label>
            <input type="text" class="form-control" name="phd_scholar" placeholder="Phd Scholar" required>
        </div>
        <div class="col-md-3">
            <label class="label-head">Phd Scholars Guided</label>
            <input type="text" class="form-control" name="phd_scholar_guide" placeholder="Phd Scholars Guided" required>
        </div>
        <div class="col-md-3">
            <label class="label-head">Subject Trust Area Involved</label>
            <input type="text" class="form-control" name="sub_trust_area_inv" placeholder="Subject trust area involved" required>
        </div>

    </div>

    <div ng-if="myVar === 'no'" class="col-md-12" style="padding:5px" id="general-2">
        <div class="col-md-2">
            <label class="label-head">H index Scopus</label>
            <input type="text" class="form-control" name="guide_since" placeholder="H index Scopus" required>
        </div>
        <div class="col-md-3">
            <label class="label-head">I10 Index Scopus</label>
            <input type="text" class="form-control" name="i10_index_of_scholar" placeholder="I10 Index Scopus" required>
        </div>
        <div class="col-md-2">
            <label class="label-head">H-Index Google Scholar</label>
            <input type="text" class="form-control" name="h_index_of_google_scholar" placeholder="H-Index Google Scholar" required>
        </div>
        <div class="col-md-3">
            <label class="label-head">I10-index Google Scholar</label>
            <input type="text" class="form-control" name="i10_index_of_google_scholar" placeholder="I10-index Google Scholar" required>
        </div>
        <div class="col-md-2">
            <label class="label-head">Link of Google Scholar</label>
            <input type="text" class="form-control" name="link_of_google_scholar" placeholder="Link of Google Scholar" required>
        </div>

    </div>


</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

我创建了一个带有工作解决方案的plnkr。您可以分别使用ng-hide = 'myVar==='no'和ng-hide = 'myVar==='yes'作为general-1和general-2 div。其他一切看起来都很完美。

Plnkr链接：https://plnkr.co/edit/rAJMJEFRTFi2Oc2dNZQY?p=preview

答案 2 :(得分：0)

I am using Angular 5 , you can use this approach like :

Html code:

(for select box) 


  Select Source Type:
               <select [(ngModel)]="selectAccountType" 
               (change)='onOptionsSelected($event)'style="width: 100px">            
<option id="VALUEA"  value="VALUEA">VALUEA</option>
<option id="VALUEB"  value="VALUEB">VALUEB</option>
               </select>

Div code:
 <div  *ngIf="showData===true">
<p> Showing DIV </p>
</div>

Type script code:

onOptionsSelected(event){
  let value = event.target.value;
  this.sourceValue=value;
  if(this.sourceValue==='VALUEA')
  {
this.showData=true;
  }
  else{
    this.showData=false;
  }
}
相关问题
最新问题