如何在angular js中基于选择下拉菜单隐藏div

Question

如何基于选择下拉菜单隐藏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'"中添加一个条件。这里你不需要在控制器
中编写任何逻辑。

工作小提琴

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>