Question

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

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。

$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>

但它并没有为我提供任何数据。我错了什么？

Answer 1

这里有一些问题。

首先，您循环浏览单个对象（“品牌”），而不是您想要的对象数组。当您获得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中看到所有内容。

请参阅此plunker http://plnkr.co/edit/cgxhhe8Qh2UfCUAxSDio?p=preview

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

1 个答案: