我有一个像这样的嵌套对象:
ObjectA-ObjectB-AddressObject-address1
ObjectA-ObjectB-ObjectC-AddressObject-address2
我想为表单创建下拉列表,以便始终将 ObjectC 的地址作为默认值(如果有的话)。我是 AngularJS 的新手,那么正确的方法是什么?我应该在 Controller 中创建某种选项列表还是有更正确的方法?我尝试从 Stack 中搜索答案,但有很多不同的解决方案。我认为我不能使用 ngOptions 因为选项来自两个不同的来源,对吗?
<input type="text" ng-model="rma.customerCustomerId.addressAddressId.address" placeholder="Address">
<input type="text" ng-model="rma.retailerRetailerId.addressAddressId.address" placeholder="Address">
我只是尝试在我的 Controller 中获取值:
console.log(rma.customerCustomerId.addressAddressId.address);
console.log(rma.retailerRetailerId.addressAddressId.address);
最佳答案
同意问题中的评论之一。这感觉不像 Angular 问题。您应该将域模型转换为更合适的 View 模型。在最简单的例子中,可能是这样的。
如果您的模型如下所示:
self.foo = {
bar : {
addr : { value : 'Bar.Address' },
baz : {
addr : { value : 'Baz.Address' }
}
}
};
然后,您可以使用以下方法将其展平:
var result = [];
if (self.foo.bar.baz) result.push(self.foo.bar.baz.addr.value);
result.push(self.foo.bar.addr.value);
self.addresses = result;
然后将选定的地址绑定(bind)到结果数组中的第一个元素:
self.selectedAddress = self.addresses[0];
将它们放在一起,您会得到类似于下面的代码片段的内容。
(function(undefined) {
'use strict';
angular.module('myApp',[]);
angular.module('myApp')
.controller('myCtrl', myCtrl);
myCtrl.$inject = ['$log', '$scope'];
function myCtrl($log, $scope) {
var self = this;
self.foo = {
bar : {
addr : { value : 'Bar.Address' }, //remove baz element below to simulate that it's not there.
baz : {
addr : { value : 'Baz.Address' } //This will be preferred if exists...
}
}
};
self.selectedAddress = undefined;
self.addresses = [];
$scope.$watch(function() { return self.foo.bar.baz.addr.value; }, function(newVal, oldVal) {
bindAddresses();
});
activate();
function activate() {
bindAddresses();
}
function bindAddresses() {
var result = [];
if (self.foo.bar.baz && self.foo.bar.baz.addr && self.foo.bar.baz.addr.value) {
result.push(self.foo.bar.baz.addr.value);
}
result.push(self.foo.bar.addr.value);
self.addresses = result;
self.selectedAddress = self.addresses[0];
}
}
}());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
<form ng-controller='myCtrl as vm'>
<p>
Address 1
<input ng-model="vm.foo.bar.addr.value" />
</p>
<p>
Address 2
<input ng-model="vm.foo.bar.baz.addr.value" />
</p>
<select ng-model='vm.selectedAddress' ng-options='addr for addr in vm.addresses'></select>
</form>
</div>
关于javascript - 在 AngularJS 中从两个或多个源创建动态下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29472034/