无法使用angular.js获取下拉列表的默认选定值

Question

我没有使用angular.js获取下拉列表的默认值。 我在下面解释我的代码。

<th>
<select style="width:100%; border:none; font-weight:bold;" ng-options="sub.name for sub in noCourse track by sub.value" ng-model="search" ng-change="selectedCourseTable();" >
<option value="">Course Name</option>
</select>
</th>

在这里，我正在动态获取数据并将其绑定在select标签中。上面的代码生成以下html输出。

<select style="width:100%; border:none; font-weight:bold;" ng-options="sub.name for sub in noCourse track by sub.value" ng-model="search" ng-change="selectedCourseTable();" class="ng-valid ng-touched ng-dirty ng-valid-parse">
<option value class  selected="selected">Course Name</option>
<option value="Master of computer application" label="Master of computer application">Master of computer application</option>
<option value="Bachelor of Technology" label="Bachelor of Technology">Bachelor of Technology</option>
<option value="Master in Technology" label="Master in Technology">Master in Technology</option>
</select>

subjectController.js：

$scope.selectedCourseTable=function(){
        if($scope.search.value=='Bachelor of Technology'){
            alert($scope.search.value);
        }
        if($scope.search.value=='Master in Technology'){
            alert($scope.search.value);
        }
        if($scope.search.value=='Master of computer application'){
            alert($scope.search.value);
        }
        if($scope.search==''){
            alert($scope.search.value);
        }
    }

在这里我无法检查何时在ng-change事件中选择文本作为Course Name 。 ng-change选择选项我可以使用此行$scope.search.value进行检查，但是当用户选择此默认文本Course Name时无法检查。请帮助我解决此问题。

Answer 1

删除模板中的<option value="">Course Name</option>并在对象列表中添加相应的默认选择将解决此问题。

无论您在哪里设置noCourse ：

$scope.noCourse = [{
    name :'Course Name',
    value: ''
}, /*rest of the values*/];
$scope.search = $scope.noCourse[0];

然后，您需要先修改该行，然后才能检查对象：

// instead of this:
if ($scope.search == '') {
    alert($scope.search.value);
}

// do this
if ($scope.search.value == '') {
    alert($scope.search.value);
}