时间戳

首页 > 解决方案 > 如何根据选择角度js中的下拉菜单隐藏div

javascript - 如何根据选择角度js中的下拉菜单隐藏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";
                     }
                    };

谁能指导我解决这个问题？

标签： javascriptangularjs

解决方案

你的代码有什么问题？

这纯粹是逻辑问题。您正在检查ng-if="studentType"是否显示输入容器。在您正在使用的更改事件中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>

推荐阅读