我有两个不同的div和基于下拉选择如果是 general-1 div show和 general-2 div hide，如果选择No general-2 div show和general-1 div hide。
请使用angular js为我提供正确的解决方案，我的示例代码如下所示。
我是 angular Js 的新手，所以请为我提供简单的方法来解决这些功能，以便更多地了解此代码。
<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>
答案 0 :(得分：6)
您可以简单地使用ng-if
var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.myVar='yes';
})<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>
答案 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;
}
}