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

Question

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

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

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

我是角度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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

jit*_*der 7

你可以简单地使用 ng-if

var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
   $scope.myVar='yes';
})

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，3 月前
查看次数：	6570 次
最近记录：	6 年，2 月前