如何在Angular JS的输入文本字段中显示下拉列表的选定值

Question

html file:

<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 file:

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!";    
        };    

data:

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

The problem is the form I am using intially to save data. Once data is saved to db it is coming in dropdown. After choosing one value from dropdown it should come to text fields.

I have tried so far ng-model by using same variable names,even though form's ng-model and dropdown's ng-model have same variable ie shipping.. But it didn't work. Please help me out what I am missing in here.

Answer 1

If I understand your goal and you data's schema, you need to change the ng-model of the input[name="Address"] to shipping.addressLine1.shipping .

I get this idea according the data's structure that came from the .map :

return {
     shipping: address.addressLine1 
};

You can see the structure when you pick a option from the select - the model will displayd and you can see that the structure is (for example):

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

If you have a question about this, let me know.

I tried to simulate the situation without the server, hopefully I simulate it right.

Now, to the code:

 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> 

Answer 2

Did you try using AngularJS' ng-change attribute in the drop down?

Try like this:

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

In your controller add the following function:

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

Hope this helps!

Here is a working jsFiddle https://jsfiddle.net/ashishU/umn8or3g/1/