Как отобразить выбранное значение выпадающего в текстовых полях ввода в угловых JS

Question

HTML-файл:

<select ng-model="shipping" ng-options="shipping.shipping for shipping in shipAddress">
 <option value=''>--Select Address --</option>
</select>

<form name="shippingForm" class="form-horizontal" role="form">
 <div class="form-group">
    <p class="control-p col-sm-2" for="Address">Address Line1</p>
    <div class="col-sm-10">
        <input type="text" name="Address" placeholder="Address Line1"
         ng-model="shipping.addressLine1" class="input-width" ng-init ="shipping.addressLine1"/>
   </div>
 </div>

 <div class="form-group">
      <p class="control-p col-sm-2" for="Address2">Address Line2:</p>
      <div class="col-sm-10">
           <input type="text" name="AddressLine" placeholder="Address Line2" ng-model="shipping.addressLine2" class="input-width" />
        </div>
      </div>
  </form>

JS файл:

if (data){  
          console.log(data);      
          $scope.addressToShip = data; 
          var ShipAddress=[];
          storeLocally.set('ship Info', data);
          if(data.addressLine2 == null){
            $scope.shipAddress = data.map(function(address) {
                  return {
                  shipping: address.addressLine1 
                  };

               });
           }
          else{
          $scope.shipAddress = data.map(function(address) {
              return {
              shipping: address.addressLine1 +', '+ address.addressLine2
              };

           });
      } 
      }
 },
    function (data) {
        //if (data.status == 500) {
        //  $scope.addressError = "Oops! No Address Found!";    
        };    

данные:

{0 :"123 waller st,suite#220"},
{1 :"323 waller st,suite#230"}

Проблема в форме, которую я использую изначально для сохранения данных. Как только данные сохранены в БД, они появляются в раскрывающемся списке. После выбора одного значения из выпадающего списка оно должно появиться в текстовых полях.

До сих пор я пробовал ng-модель, используя одни и те же имена переменных, хотя ng-модель формы и ng-модель выпадающего меню имеют одну и ту же переменную, т.е. отправку. Но это не сработало. Пожалуйста, помогите мне, что мне здесь не хватает.

Answer 1

Вы пытались использовать AngularJS' ng-change атрибут в раскрывающемся списке?

Попробуйте вот так:

<select ng-model="shipping" ng-options="shipping.shipping for shipping in shipAddress" ng-change="someFunction(shipping.shipping)">
  <option value=''>--Select Address--</option>
</select>

В вашем контроллере добавьте следующую функцию:

$scope.someFunction = function(shipping) {
  $scope.shipping.addressLine1 = // Assign value from the shipping variable here
  $scope.shipping.addressLine2 = // Assign value from the shipping variable here
}

Надеюсь это поможет!

Вот рабочий jsFiddle https://jsfiddle.net/ashishU/umn8or3g/1/

Answer 2

Если я понимаю вашу цель и вашу схему данных, вам нужно изменить ng-model из input[name="Address"] в shipping.addressLine1.shipping,

Я получил эту идею в соответствии со структурой данных, которые пришли из .map:

return {
     shipping: address.addressLine1 
};

Вы можете увидеть структуру, когда вы выбираете вариант из select - модель отобразится, и вы увидите, что структура (например):

{
  "addressLine1": {
    "shipping": "123 waller st"
  }
}

Если у вас есть вопрос по этому поводу, дайте мне знать.

Я пытался смоделировать ситуацию без сервера, надеюсь, я имитирую это правильно.

Теперь к коду:

angular.module('myApp', []).
controller('ctrl', function($scope) {
  var data = [{
    addressLine1:"123 waller st", addressLine2:"suite#220"
  }];

  if (data) {
    console.log(data);      
    $scope.addressToShip = data; 
    var ShipAddress = [];
    //storeLocally.set('ship Info', data);
    if (data.addressLine2 == null) {
      $scope.shipAddress = data.map(function(address) {
        return {
          shipping: address.addressLine1 
        };
      });
    }
    else {
      $scope.shipAddress = data.map(function(address) {
        return {
          shipping: address.addressLine1 +', '+ address.addressLine2
        };
      });
    } 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="ctrl">
  <select ng-model="shipping.addressLine1" ng-options="shipping.shipping for shipping in shipAddress">
    <option value=''>--Select Address --</option>
  </select>
  <br />
  <pre>
    {{shipping | json}}<br />
    {{shipping.addressLine1 | json}}
  </pre>
  <form name="shippingForm" class="form-horizontal" role="form">
    <div class="form-group">
      <p class="control-p col-sm-2" for="Address">Address Line1</p>
      <div class="col-sm-10">
        <input type="text" name="Address" placeholder="Address Line1"
               ng-model="shipping.addressLine1.shipping" class="input-width" ng-init ="shipping.addressLine1"/>
      </div>
    </div>

    <div class="form-group">
      <p class="control-p col-sm-2" for="Address2">Address Line2:</p>
      <div class="col-sm-10">
        <input type="text" name="AddressLine" placeholder="Address Line2" ng-model="shipping.addressLine2" class="input-width" />
      </div>
    </div>
  </form>
</div>