angularjs，選擇，添加選項

Question

我試圖將一個選項添加到選擇元素。 該值由用戶表單以jQuery ui模態提供。

當我使用Chrome Developer工具時，可以看到綁定對象數組的確在獲取新對象，但未在select元素中顯示。

我在控制台中使用$（'＃company'）。scope（）。vendors調出陣列。 它顯示了已添加到數組中的項目，但未顯示在選擇框中。

這是我所擁有的：

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>

內聯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');
    }

我嘗試創建一個jsFiddle，但我想我不太確定如何使所有內容都能正常工作。 但是無論如何，這是我的嘗試： http : //jsfiddle.net/aPXxe/

Answer 1

嘗試這個：

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