如何隐藏 div 基于 select 下拉列表 angular js

Question

如何根据 select 下拉菜单隐藏 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";
                     }
                    };

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

Answer 1

你的代码有什么问题？

这纯粹是逻辑问题。您正在检查 ng-if="studentType" 以显示输入容器。在您使用 if (value.studentType = "angularjs") 的更改事件中。这不是条件检查，它的赋值运算符。您必须使用 if (value.studentType == "angularjs") 或 if (value.studentType === "angularjs") 来比较值 value.studentType 和字符串 "angularjs"。在您的场景中，if 语句总是将 "angularjs" 分配给 studentType，然后 if 中的代码将 "false" 分配给 studentType。没有必要这样做。

您可以通过多种方式做到这一点。我在这里建议两个选项

选项 1：在模板中检查 studentType 的值。如果 studentType 不是 angularjs 则只显示输入。所以只要在ng-if="studentType !== 'angularjs'"中添加一个条件即可。在这里您不必在控制器中编写任何逻辑

工作Fiddle

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: 在更改函数中，检查所选选项的值。根据所选选项的值设置可见性布尔值。根据该布尔值使输入可见

工作Fiddle

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>

如何隐藏 div 基于 select 下拉列表 angular js

How to hide div based on select the dropdown in angular js

javascript

angularjs