How to programmatically select ng-option value?

Question

I have a view that is filled with dropdownlists to filter a report. I also have a view of saved filters that are displayed as links. When a user clicks on their saved filters, I want the appropriate values of the dropdownlists to be selected. The drop downs are being populated properly. On the saved filter link there is an ng-click that will call a function that iterates through the collection of saved filter values and automatically selects the correct one. I cannot figure out how to programmatically set the selected option. Any help is much appreciated!

<select uid="locSelect" 
        class="span12" 
        ng-model="reportDetail.selectedLoc" 
        ng-options="loc.dbid as loc.serviceName for loc in reportDetail.locList | orderBy:'name'">
    <option uid="unselectedLocOption" value="">-- Select One --</option>
</select>

Here is the list of saved filters:

<div class=" well fixed-search" style="overflow-x: hidden;overflow-y: auto;">
<div class="well-header">
    Saved Filters
</div>
<div ng-if="!hasSavedFilters">
    <span>No saved filters</span>
</div>
<ul ng-if="hasSavedFilters" class="nav nav-list dashboard-list">
    <li ng-repeat="filter in reportDetail.savedFilters">
        <a uid="savedFilter" href="" ng-click="reportDetail.loadSavedFilters(filter.filters)">
            <span ng-bind="filter.title"></span>
        </a>
    </li>
</ul>

And here is my controller

(function(){
'use strict';

var ReportDetailController = function(ReportsService, $scope){
    var _locList = {};
    var _hospitalStatusList = {};
    var _providerStatusList = {};
    var _savedFilters = [];
    var _sourceTypeList = {};
    var _dateRangeList = {};

    var _init = function(){
        ReportsService.getCurrentReportSavedFilters().then(function(data){
            $scope.reportDetail.savedFilters =data;
            $scope.hasSavedFilters = ReportsService.hasSavedFilters();
        });

        ReportsService.getLOCListForDDL().then(function(data){
            $scope.reportDetail.locList = data;
            //$scope.reportDetail.selectedLoc = $scope.reportDetail.locList[0];
        });

        ReportsService.getSelectListData()
            .then(function(data){
                $scope.reportDetail.sourceTypeList = data.CONNECTION_TARGET_STATUS;
                $scope.reportDetail.hospitalStatusList = data.CONNECTION_SOURCE_STATUS;
            });
        ReportsService.getDateRangesForDDL()
            .then(function(data){
                $scope.reportDetail.dateRangeList = data;
            });

        $scope.reportDetail.providerStatusList = ReportsService.getProviderStatusForDDL();


    };



    var _loadSavedFilters = function(filters){
        for(var i = 0, l = $scope.reportDetail.locList.length; i<l; i++){
            if($scope.reportDetail.locList[i].serviceName == filters.levelOfCare){
                 $scope.reportDetail.selectedLoc = $scope.reportDetail.locList[i];
                console.log($scope.reportDetail.selectedLoc);
            }
        }
    }

    var _isActive = function(filter){
        for(var i = 0, l = $scope.reportDetail.savedFilters.length; i<l; i++){
            if(filter.title == $scope.reportDetail.savedFilters[i].title){
                return true;
            }
            return false;
        }
    }

    var _generateReport = function(){
        return ReportsService.generateReport();
    };

    $scope.reportDetail = {
        init: _init,
        selectedLoc: null,
        isActive: _isActive,
        locList: _locList,
        selectedHospitalStatus: 'NOTIFIED',
        hospitalStatusList: _hospitalStatusList,
        selectedProviderStatus: 'NEW',
        providerStatusList: _providerStatusList,
        selectedSourceType: 'CONNECTED',
        sourceTypeList: _sourceTypeList,
        selectedDateRange: '',
        dateRangeList: _dateRangeList,
        savedFilters: _savedFilters,
        loadSavedFilters: _loadSavedFilters,
        generateReport: _generateReport
    };

    $scope.reportDetail.init();
};

app.controller('ReportDetailController', ['ReportsService', '$scope',  ReportDetailController]);
})();

Chappelka

Answer 1

Due to time constraints I ended up going a different route. I created an event bus of sorts in my service layer and subscribe to the even in my controller, updating the model, and used ng-repeat with ng-selected.

I'm still interested to understand why this was not working with ng-options. The model and ng-options types matched, and everything appeared to be wired up correctly. When I have more time i'll re-address the original issue. Thanks for all who responded!

Chappelka

Answer 2

You just need to set the ng-model to whatever it should be, so in this case you would set reportDetail.selectedLoc to whatever loc.dbid it should be.

For example: http://jsfiddle.net/uWLua/1/

Note: Make sure they have the same type, so in your example make sure they are either both integers, or both strings, it will not know they are the same if you have one as 5073 and one as "5073"

I updated the fiddle to show that the string and number do not do the same thing.

Shelli

hmm...i thought that's what I was doing. I have ng-model set to reportDetail.selectedLoc. When the link is clicked, loadSavedFilters fires and sets reportDetail.selectedLoc to the new value...but it doesnt change. – Chappelka

I am almost positive I know what the issue is, as I once spent hours debugging this. Make sure they are either both integers, or both strings, it will not know they are the same if you have one as 5073 and one as "5073" – Shelli

That's not it either. Both are integers. – Chappelka

One other thing to check. If you have a long-running init sequence on a complex form, and you want to set some SELECT box default value, you may want to set a $watch on an isReady flag that you implement and then call $timeout(function(){ $scope.$apply( function(){ viewmodel.Value = desiredValue;} ) } , 0) because you may be changing the viewmodel value at a time that is not picked up by Angular's digest cycle. – Jillene

Answer 3

The ng-model and the expression feeding ng-options -must- match in order for Angular to compare values and see what option is 'selected'. Just as 'dave' indicated.

Uralite

The both matched...still no luck. – Chappelka

Oh - When I wrote "must match" I meant that both ng-model and options need to be feed from the same array/objs - Not that the value of a item in the ng-model array matches a value in the options array - They are not compared by value. – Uralite

Answer 4

You need custom directive, or something similar to this two approaches

<div ng-controller="MyCtrl">
<h1>Approach 1</h1>
<span ng-repeat="val in dbs">
    <input type="checkbox" ng-model="val.checked">{{val.name}}
</span>
<hr/>
<h1>Approach 1</h1>
<select multiple>
    <option ng-repeat="val in dbs" name="val.name" value="val.name" ng-selected="val.checked">{{val.name}}</option>
</select>
<h4>Source (note scope changes)</h4>
{{dbs}}
</div>

also you can use ng-change to do some complex ops

Inextensible

Answer 5

If I understand, in summary, you have a select filled with a list, and you want to programmatically set one of those to be selected, type it as the default right?

If so, you can easily solve this with ng-options, just associate your controller instance with scope and assign the position of the list you want to the model of select, for example:

Select HTML

<select ng-model="vm.aluno_id" name="aluno_id" ng-options="aluno.nome for aluno in alunos">

Controller

app.controller("auxiliarController", function( $scope){

     //instancia controller;(Controller instance;)
     var vm = this;
     $scope.vm = vm;

     //carregando lista no scope, que será utilizado pelo angular no select
    //Loading list in scope, which will be used by angular in select
     $scope.alunos = [{id: 1, nome: "aa"}, {id: 2, nome: "bb"}];

     //setando item default no select
     $scope.vm.aluno_id = $scope.alunos[0];

});

I hope I have helped

Neurasthenia

Stack Overflow requires that all posts be in English. Please edit your post or comment to comply with this rule or remove it. You may repost it in one of these language specific Stack Overflow communities which allow non-English: Spanish, Japanese, Russian, Portuguese. – Gramercy

You might want to translate that before it gets deleted (StackOverflow = English). – Walley