AngularJS中如何根据下拉框选中值隐藏指定div

存在的问题 #

• 条件判断误用赋值运算符：if (value.studentType = "angularjs") 里的=是赋值操作，不是比较操作，会直接把studentType强制修改为angularjs，判断逻辑永远成立，应该用===做全等比较。
• 布尔值错误写为字符串：你把$scope.studentType赋值为字符串"false"，在JS里非空字符串属于真值，ng-if判断时会认为条件成立，不会隐藏元素，应该使用不带引号的布尔值false。
• 逻辑冲突：下拉框的ng-model直接绑定了studentType，如果直接修改这个值，会导致下拉框的选中状态被篡改，和用户选择的内容不一致，应该单独声明一个控制显隐的变量。

修正方案 #

模板代码 #

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

<div ng-if="showAttendence">
  <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>

控制器代码 #

// 初始化默认显示，因为默认选中Java
$scope.showAttendence = true;

$scope.getOption = function() {
    // 选中angularjs时隐藏，其他情况显示
    $scope.showAttendence = $scope.studentType !== 'angularjs';
};

如果你的显隐规则有调整，修改getOption里的判断条件即可。

内容的提问来源于stack exchange，提问作者Milan Kumar Giri