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

数据：

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

问题是我正在使用的形式来保存数据。一旦数据保存到db，它就会进入下拉列表。从下拉列表中选择一个值后，它应该来到文本字段。

我使用相同的变量名称尝试了迄今为止的ng-model，尽管表格模型和下拉模型具有相同的变量即运输..但它没有工作。请帮我解决一下我在这里缺少的东西。

Answer 1

如果我了解您的目标和数据架构，则需要将ng-model的{{1}}更改为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
        };
      });
    } 
  }
});

Answer 2

您是否尝试在下拉列表中使用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/

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

2 个答案: