如何根據在angularjs中選擇下拉串列來隱藏div

如何根據選擇下拉選單隱藏 div。這是我撰寫的示例代碼

 <div>
                    <p>Course Type</p>
                    <div>
                        <select name="student-type" id="student-type" class="icon-select-down" ng-model="studentType" ng-change="getOption(this)">
                            <option value="java" selected>Java</option>
                            <option value="angularjs">Angular js</option>
                            <option value="reactJs">React js</option>
                        </select> 
                    </div>
                </div>

                <div ng-if="studentType">
                  <p>Attendence Days</p>
                  <div class="slice-item">
                    <input type="text" class="input input-text" ng-model="attendenceDays" required validate-on="blur" ng-pattern="/^([1-9]|10)$/" invalid-message="'You must enter number between 1 to 25'" />
                  </div>
                </div>

在控制器中我寫了下面的代碼。

$scope.getOption = function(value) {
                     if (value.studentType = "angularjs") {
                       $scope.studentType = "false";
                     }
                    };

任何人都可以指導我解決這個問題嗎？

uj5u.com熱心網友回復：

你的代碼有什么問題？

它純粹是邏輯問題。您正在檢查ng-if="studentType"是否顯示輸入容器。在您使用的 change 事件中if (value.studentType = "angularjs")。這不是條件檢查，而是它的賦值運算子。您必須使用if (value.studentType == "angularjs")或if (value.studentType === "angularjs")將值value.studentType與 string進行比較"angularjs"。在您的場景中， if 陳述句將始終分配"angularjs"給studentType，然后 if 中的代碼將分配"false"給studentType。沒有必要以這種方式執行此操作。

您可以通過多種方式做到這一點。我在這里建議兩種選擇

• 選項 1：在模板內檢查studentType. 如果studentType不是，angularjs則只顯示輸入。所以只需在ng-if="studentType !== 'angularjs'". 在這里您不必在控制器內部撰寫任何邏輯

作業小提琴

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    // $scope.showInput = true;
    // $scope.getOption = function (value) {
    //     if (value.studentType == "angularjs") {
    //         $scope.showInput = false;
    //     }
    // };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <div>
        <p>Course Type</p>
        <div>
            <select name="student-type" id="student-type" class="icon-select-down" ng-model="studentType"
                ng-change="getOption(this)">
                <option value="java" selected>Java</option>
                <option value="angularjs">Angular js</option>
                <option value="reactJs">React js</option>
            </select>
        </div>
    </div>

    <div ng-if="studentType !== 'angularjs'">
        <p>Attendence Days</p>
        <div class="slice-item">
            <input type="text" class="input input-text" ng-model="attendenceDays" required validate-on="blur"
                ng-pattern="/^([1-9]|10)$/" invalid-message="'You must enter number between 1 to 25'" />
        </div>
    </div>
</div>

• 選項 2：在更改功能內，檢查所選選項的值。根據所選選項的值設定可見性布林值。根據該布林值使輸入可見

作業小提琴

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.showInput = true;
    $scope.getOption = function (value) {
        $scope.showInput = value.studentType !== "angularjs";
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <div>
        <p>Course Type</p>
        <div>
            <select name="student-type" id="student-type" class="icon-select-down" ng-model="studentType"
                ng-change="getOption(this)">
                <option value="java" selected>Java</option>
                <option value="angularjs">Angular js</option>
                <option value="reactJs">React js</option>
            </select>
        </div>
    </div>

    <div ng-if="showInput">
        <p>Attendence Days</p>
        <div class="slice-item">
            <input type="text" class="input input-text" ng-model="attendenceDays" required validate-on="blur"
                ng-pattern="/^([1-9]|10)$/" invalid-message="'You must enter number between 1 to 25'" />
        </div>
    </div>
</div>

標籤：javascript angularjs

上一篇：設定多維物件的值

下一篇：FastAPI 學習之路（三十三）操作資料庫