AngularJS ngOptions выбирает вариант по умолчанию

У меня есть следующий элемент select, который динамически заполняется с помощью директивы angular 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 версии 1.4.3.


javascript angularjs ng-options
person Andrew Mairose    schedule 12.11.2015    source источник
comment
Является ли это дубликатом stackoverflow.com/questions/24411820/?   -  person Adam_O    schedule 13.11.2015
comment
Нет, этот вопрос не касается ngOptions.   -  person Andrew Mairose    schedule 13.11.2015

Ответы (2)


arrow_upward
2
arrow_downward

Ну, вы могли бы отнести какую-то модель к вашему дефолтному варианту. Посмотри:

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

function MyCtrl($scope) {
    $scope.options = [
        { desc: 'op1' },
        { desc: 'op2' },
        { desc: 'op3' }
    ]
    $scope.reset = function(){
    	$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>

Это должно сработать.

person Italo Ayres    schedule 12.11.2015
comment
Спасибо, это помогло, но суть проблемы заключалась в том, что мой выбор был включен в страницу с помощью ngInclude, который создает дочернюю область для шаблона. - person Andrew Mairose; 13.11.2015
comment
Но вы поняли это в конце концов? Или вы все еще пытаетесь? @ЭндрюМайроз - person Italo Ayres; 13.11.2015
comment
Я понял. Я разместил свое решение в другом ответе. - person Andrew Mairose; 14.11.2015

arrow_upward
1
arrow_downward

Моя проблема заключалась в том, что мой <select> был включен на мою страницу с помощью директивы ngInclude. Я обнаружил, что директива ngInclude фактически создает дочернюю область для включаемого шаблона. Итак, чтобы иметь возможность установить выбранную группу, мне нужно было сделать 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 может быть не определено при достижении этого оператора.

person Andrew Mairose    schedule 13.11.2015