angularjs,选择,添加选项
angularjs, select, add option
我正在尝试为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;
});
相关文章:
- 如何为下拉列表的每个选项添加一个属性
- 使用jQuery向“选择选项”添加默认属性
- 将默认选项添加到ng-if
- 从jquery中的select选项添加两个不同的数组值(text&value)
- 为selectize.js选项添加数据属性
- 将select选项添加到id中
- AngularJS ng选项添加了另一个选项
- 将选项添加到插件msDropdown生成的下拉列表的最佳方式是什么
- 将选项添加到多选并设置为选定
- 如何将空白选项添加到木偶收藏视图生成的选择中
- 如何将此选项添加到此图像选取器项目中
- 使用 XHR 更新服务器文件并将选项添加到 html 选择
- 如何使用 JavaScript 将选项添加到 HTML 表单下拉列表中
- 为什么当我将数据选项添加到骨干模型获取时,它不会触发回调
- 如何将下拉列表中的所有选项添加到 php 中的数组中
- 角度JS多选选项添加额外的?选择
- 自动选择<选项>添加到<选择>
- 如何动态地将所选选项添加到表中
- 动态地将选项添加到 Angular 选定的组合框中
- AngularJS:将选项添加到选择而不选择它