angularjs, select, add option

Question

I am trying to add an option to a select element. The value is being given by a user form in a jquery ui modal.

When I use Chrome Developer tools, I can see that the bound object array is indeed getting the new object, but it's not showing up in the select element.

I used $('#company').scope().vendors in the console to bring up the array. It shows items being added to the array, but they aren't showing in the select box.

Here is what I have:

app.js

app.factory('Vendors', function(){
    var Vendors = {};

    Vendors.list = [
    {
        id: 1,
        name: 'Company 1'
    },
    {
        id: 2,
        name: 'Company 2'
    },
    {
        id: 3,
        name: 'Company 3'
    }
    ]

    return Vendors;
})

app.controller('companyCtrl', function($scope, Vendors){
    $scope.vendors = Vendors;

    $scope.selectedVendor = 0;

    $scope.companySelect = function(){
        alert("You chose " + $scope.selectedVendor.name)
    }

    $scope.addCompany = function(name){
        var maxId = 0;

        for(var i=0; i<$scope.vendors.list.length; i++){
            maxId = $scope.vendors.list[i].id;
        }

        newVendor = {id:++maxId, name:name};

        $scope.vendors.list.push(newVendor)
        $scope.selectedVendor = newVendor;
    }
})

HTML

<div class="row">
    <div class="grid_12" ng-controller="companyCtrl" id="company">
        <span>Company</span>
        <select ng-model="selectedVendor" ng-change="companySelect()" ng-options="v.name for v in vendors.list">
            <option value="">-- Choose Company --</option>
        </select>
        <small><button onclick="openModal('addCompany');">Add</button></small>
    </div>
</div>

Inline JS

    $( "#addCompany" ).dialog({
        autoOpen: false,
        width: 350,
        modal: true,
        buttons: {
            "Create new company": function() {
                var name = $('#name').val();

                if(name != ''){
                    $('#company').scope().addCompany(name);
                }

                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            $('#name').val( "" );
        }
    });

    function openModal(id){
        $('#'+id).dialog('open');
    }

I tried creating a jsFiddle, but I guess I'm not too sure how to get everything on there to work yet. But here is my try anyway: http://jsfiddle.net/aPXxe/

When I console.log'd the selectedVendor, it was the whole object, not just the id. And adding the .id doesn't seem to help. — QualityCoder
– QualityCoder, Commented Jul 17, 2013 at 6:15

karaxuna · Accepted Answer · 2013-07-17 06:17:23Z

1

Try this:

$scope.$apply(function(){
    $scope.vendors.list.push(newVendor);
    $scope.selectedVendor = newVendor;
});

edited Jul 17, 2013 at 6:17

answered Jul 17, 2013 at 6:10

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

QualityCoder Over a year ago

Putting this in place of $scope.vendors.list.push(newVendor); worked. Thanks!

QualityCoder Over a year ago

It now adds it to the select, but still doesn't select it. Do I need to add the selectedVendor assignment to the $apply function as well?

QualityCoder Over a year ago

I had to remove the .id for it to work, but adding that to the $apply function did the job. Thanks for answering my newb questions. :)

Collectives™ on Stack Overflow

angularjs, select, add option

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related