AngularJS ngOptions選擇默認選項

我有以下select元素，它是使用angular的ngOptions指令動態填充的。AngularJS ngOptions選擇默認選項

<select ng-options="group.parameterGroupId as group.name for group in parameterGroups" 
     ng-change="getParameterGroup(group.parameterGroupId)" 
     ng-model="group.parameterGroupId"> 
    <option value="">== Choose Group ==</option> 
</select>

我如何編程選擇默認選項== Choose Group ==以後，在下拉列表中另一個值已被選定後？

我試圖在我的控制器，這兩者都不如預期工作設置$scope.group.parameterGroupId到null和""。在這兩種情況下，當前選中的選項都保持選中狀態。

使用AngularJS v1.4.3。

來源

2015-11-12 Andrew Mairose

這是重複的http://stackoverflow.com/questions/24411820/select-the-blank-option-of-select-box-programmatically-in-angularjs-directive？ –

不，這個問題不涉及ngOptions。 –

我的問題是我的<select>包含在我的頁面中使用ngInclude指令。我發現ngInclude指令實際上爲包含的模板創建了一個子範圍。因此，爲了能夠設置選定的組，我需要使我的select的ng-model可以從其父範圍訪問。

我最終還整合了@Italo Ayres的解決方案，以訪問我的選擇的默認值。這是我的修正的標記，它使用$parent訪問我的<select>包含在我的模板的父範圍。

<select ng-options="group.parameterGroupId as group.name for group in parameterGroups" 
     ng-change="getParameterGroup(group.parameterGroupId)" 
     ng-model="$parent.group.parameterGroupId"> 
    <option value="" ng-model="$parent.defaultGroup">== Choose Group ==</option> 
</select>

然後在我的控制，我所選擇的組設置爲這樣的默認值。達到此語句時

$scope.group { 
    parameterGroupId: $scope.defaultGroup 
};

請注意，我不使用$scope.group.parameterGroupId = $scope.defaultGroup因爲$scope.group可以不定義。

來源

2015-11-13 15:27:07

那麼，你可以給你的嘲笑選項分配一些模型。請看：

var myApp = angular.module('myApp', []); 
 

 
function MyCtrl($scope) { 
 
    $scope.options = [ 
 
     { desc: 'op1' }, 
 
     { desc: 'op2' }, 
 
     { desc: 'op3' } 
 
    ] 
 
    $scope.reset = function(){ 
 
    \t $scope.selected = $scope.default; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <select ng-options="op as op.desc for op in options" ng-model="selected"> 
 
    <option value="" ng-model="default">== Choose Group ==</option> 
 
    </select> 
 
    {{selected}} 
 
    
 
    <br /> 
 
    <button ng-click="reset()">Reset!</button> 
 
</div>

這應該做的伎倆。

來源

2015-11-12 21:31:22

謝謝，這有幫助，但問題的核心是我的選擇使用ngInclude包含在頁面中，它爲模板創建子範圍。 –

但你到底想到了嗎？還是你還在嘗試？ @AndrewMairose –

我明白了。我用另一個答案發布了我的解決方案 –

AngularJS ngOptions選擇默認選項

回答

相關問題