Question

我是棱角分明的新手。我试图在下拉列表中显示数据，但输出是在控制台上，但不是在html视图上。

html： -

 <select ng-model="billing.billing" ng-options="billing in billAddress track by $index">
 </select>
<p>{{billing.billing}}</p>

js file：

 appServices.getBillAddress(userData.customerId).then(function (data){
          if (data){  
                console.log(data);      
                $scope.addressToBill = data; 
                var billAddress=[];

                 //var billAddress=[];
                if ($scope.addressToBill){
                    storeLocally.set('shipInfo', $scope.addressToBill);
                    for(var i=0;i<data.length;i++){
                     $scope.city = $scope.addressToBill[i].city;
                     $scope.state = $scope.addressToBill[i].state;
                     $scope.country = $scope.addressToBill[i].country;

                     $scope.billAddress = $scope.city +", "+  $scope.state +", "+ $scope.country;
                     console.log("billing address test: " +$scope.billAddress);
                    } 
                   }
                }
            }         
 },
  function (data) {
      if (data.status == 500) {
        $scope.addressError = "Oops! No Address Found!";    
      };
});

数据有信息：

  [{city="fremont", country="USA", state="California"}]

我在控制台收到错误：

结算地址测试：美国加利福尼亚州弗里蒙特

错误：[ngOptions：iexp]＆＃39; 选择形式的预期表达式（作为标签）？ for（ key ，）？ value in collection ＆＃39;但是通过$ index＆＃39;在billAddress轨道中获得了结算。

我不明白如何解决select和ng-option错误。如果控制台上有值，那么为什么它不会显示在html下拉列表中。请帮帮我。

Answer 1

首先，您的$scope.billAddress应该是一个集合，而不是一个字符串。重构您的代码如下：

.then(function(data){
  if (!data) {
    // handling this case may vary; here I just clear the collection
    $scope.billAddress = [];
    return;
  }
  storeLocally.set('shipInfo', data);
  $scope.billAddress = data.map(function(address) {
    return {
      billing: address.city + ', ' + address.state + ', ' + address.country
    };
  });
});

其次，您需要修复ng-options语法。一种可能的方式：

<select ng-model="selectedBilling" ng-options="billing.billing for billing in billAddress track by $index">
<p ng-bind="selectedBilling.billing"></p>

Answer 2

这条线不起作用：

<p>{{billing.billing}}</p>

Cos p超出了select-> options

的范围

只是一个片段来说明！

https://jsfiddle.net/alvarojoao/7wwdyymz/

Answer 3

看起来您始终将其设置为列表中的最后一个。不确定这是否有意...如果是这样，请告诉我。

但听起来您想在每个项目上设置帐单邮寄地址，然后将其用作标签？如果在for循环中设置了data.billAddress = ...并使用下面的select。

<select ng-model="selectedBilling" 
        ng-options="billing as billing.billingAddress for billing in billAddress track by $index">

 <p>{{selectedBilling}}</p>

我可以在控制台中打印值，但不能在html视图中打印

3 个答案: