javascript - 在 AngularJS 中从两个或多个源创建动态下拉列表

Question

我有一个像这样的嵌套对象:

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);

Answer 1

同意问题中的评论之一。这感觉不像 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>