javascript - angularjs，选择，添加选项

Question

我正在尝试向选择元素添加一个选项。该值由 jquery ui 模式中的用户表单提供。

当我使用 Chrome 开发者工具时，我可以看到绑定(bind)的对象数组确实在获取新对象，但它没有显示在 select 元素中。

我在控制台中使用了 $('#company').scope().vendors 来调出数组。它显示了正在添加到数组中的项目，但它们没有显示在选择框中。

这是我的:

应用程序.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;
});