从两个或多个来源创建 AngularJS 中的动态下拉列表

Question

我有一个这样的嵌套对象：

ObjectA-ObjectB-AddressObject-address1
ObjectA-ObjectB-ObjectC-AddressObject-address2

我想为表单创建下拉列表，这样如果有 ObjectC 的地址，那么它总是作为默认地址。我完全是 AngularJS 的新手，那么正确的方法是什么？我应该在我的控制器中创建某种选项列表还是有更正确的方法？我试图从 Stack 中搜索答案，但有很多不同的解决方案。我认为我不能使用 ngOptions，因为选项来自两个不同的来源，对吗？

<input type="text" ng-model="rma.customerCustomerId.addressAddressId.address"  placeholder="Address"> 

<input type="text" ng-model="rma.retailerRetailerId.addressAddressId.address" placeholder="Address">

我只是想在我的控制器中获取值：

console.log(rma.customerCustomerId.addressAddressId.address);
console.log(rma.retailerRetailerId.addressAddressId.address);

Answer 1

同意问题中的评论之一。这感觉不像 angular 问题。您应该只将域模型转换为更合适的视图模型。最简单的例子，大概是这样的。

如果您的模型是这样的：

    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;

然后只需将所选地址绑定到结果数组中的第一个元素：

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>

从两个或多个来源创建 AngularJS 中的动态下拉列表

Creating dynamic dropdown list in AngularJS from two or more sources

javascript

angularjs

ng-options