Javascript 如何在Angularjs中使用JSON数据分配/填充HTML select

我从perl脚本获取json响应。这是看起来像这样的反应

alert (respose) // ouput - object
var json = JSON.stringify(response);
alert (json);

output:

{
    "brands": [
        {
            "brand_image_path": "/images/brands/aakash.png",
            "brand_name": "Aakash",
            "brand_id": "74"
        },
        {
            "brand_image_path": "/images/brands/aashirvaad.png",
            "brand_name": "Aashirvaad",
            "brand_id": "51"
        },
        {
            "brand_image_path": "/images/brands/yardley.png",
            "brand_name": "Yardley",
            "brand_id": "25"
        }
    ]
}

$scope.brandlist = response;

从脚本获得响应后，我将它分配给$scope，如下所示

alert (respose) // ouput - object
var json = JSON.stringify(response);
alert (json);

output:

{
    "brands": [
        {
            "brand_image_path": "/images/brands/aakash.png",
            "brand_name": "Aakash",
            "brand_id": "74"
        },
        {
            "brand_image_path": "/images/brands/aashirvaad.png",
            "brand_name": "Aashirvaad",
            "brand_id": "51"
        },
        {
            "brand_image_path": "/images/brands/yardley.png",
            "brand_name": "Yardley",
            "brand_id": "25"
        }
    ]
}

$scope.brandlist = response;

这两个警报都为我提供了正确的值

alert ($scope.brandlist.brands[1].brand_name);
alert ($scope.brandlist.brands[2].brand_id);

如何用这些数据填充HTML页面中的选择列表。我也在用这个代码

<select ID="select-add-new-product-brand-name" ng-model="selectedItem" ng-options="brand.brand_id as brand.brand_name for brand in brandlist"></select> 

---

但它并没有为我提供任何数据。这有什么不对？

这里有几个问题

首先，您正在循环通过单个对象（“品牌”），而不是您想要的对象数组。获取ajax响应对象时，将brandlist设置为控制器中的对象数组

app.controller('MainCtrl', function($scope, $http) {
  $http.get('some/api/').then(function(result){
    $scope.brandList = result.brands;
  });

其次，您应该在控制器中设置默认的选择选项。由于您试图通过对象的brand_name属性引用brand_id，因此应设置默认选项，如下所示：

app.controller('MainCtrl', function($scope, $http) {
  $http.get('some/api/').then(function(result){
    $scope.brandList = result.brands;
    $scope.selectedItem = $scope.brandList[1].brand_id; // set the second item as default
  });

现在，您应该可以看到呈现的html中的所有内容

看到这个笨蛋了吗