angularjs,选择,添加选项

angularjs, select, add option

本文关键字:选项 添加 选择 angularjs      更新时间:2023-09-26

我正在尝试为select元素添加一个选项。该值由用户表单在jquery ui模态中给定。

当我使用Chrome Developer工具时,我可以看到绑定对象数组确实得到了新对象,但它没有显示在select元素中。

我在控制台中使用了$('#company').scope().vvendor来显示数组。它显示了添加到数组中的项目,但它们不会显示在选择框中。

这是我所拥有的:

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/

试试这个:

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