angularjs，選擇，添加選項

Question

我想添加一個選項到select元素。該值由jquery ui模式中的用戶表單提供。

當我使用Chrome開發人員工具時，可以看到綁定的對象數組確實正在獲取新對象，但它並未顯示在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; 
});