Создание динамического списка в 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

Согласован с одним комментария в вопросе. Это не похоже на угловатую проблему. Вы должны просто преобразовать свою модель домена в более подходящую модель представления. В простейшем примере, возможно, что-то вроде этого.

Если ваша модель выглядит следующим образом:

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>