将数组写入$ scope（Javascript）

Question

我正在修改Altair Material Design Template（http://themeforest.net/item/altair-admin-material-design-premium-template/12190654）&有以下Angular JS控制器。

我正在成功调用API &在for循环中创建变量。然后我想将它们写入$ scope.dragulaItems。这似乎在控制台日志中工作正常，但是该数组在页面上显示不正确。

的HTML DIV如下：

  <div class="uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5" data-uk-grid-margin dragula='"first-dragula"' dragula-model='dragulaItems'> 
      <div ng-repeat="item in dragulaItems"> 

我看到了正确数量的页面（20周风格的div）的响应返回，但在其中没有内容。

angular 
.module('altairApp',[angularDragula(angular)]) 
.controller('addResultsCtrl', [ 
    '$scope', 
    '$rootScope', 
    'utils', 

    function ($scope,$rootScope,utils) { 

     // Search 

     SessionKey = "YXZmLwmNiT3vTuXwbbQrSY8ibrGhLuWLZag3DCCH2zu7w9dO3b"; 

     $("#addSearch").submit(function(event) { 
      event.preventDefault(); 
      var searchTerm = $("#addSearch-term").val(); 
      var settings = { 
       "async": true, 
       "crossDomain": true, 
       "url": "https://secure.techfor.com/labsapi/restservice.aspx?command=PRODUCTSEARCH&searchtext="+searchTerm+"&extendedinfo=n&page=1&sessionkey="+SessionKey+"", 
       "method": "GET", 
       "headers": { 
       "cache-control": "no-cache", 
       } 
      } 
      $.ajax(settings).done(function (response) { 
       //console.log(response); 
       $("#searchTerm").html(searchTerm); 
       $scope.dragulaItems = []; 
       for (i in response.Products) { 
        var name = response.Products[i].Name; 
        var imagePath = response.Products[i].ImagePath; 
        var EAN = response.Products[i].EANBarcode; 
        var price = response.Products[i].Price; 
        var offer = response.Products[i].OfferPromotion; 
        var offerValid = response.Products[i].OfferValidity; 
        $scope.dragulaItems.push ("{\"Name\": \""+name+"\",\"Price\": \""+price+"\",\"EANBarcode\": \""+EAN+"\",\"ImagePath\": \""+imagePath+"\",\"OfferPromotion\": \""+offer+"\",\"OfferValidity\": \""+offerValid+"\"}"); 
       } 
       console.log($scope.dragulaItems); 
      }); 

     }); 

    } 

]）;

如果我手动更改$ scope.dragulaItems = [];要说：

$scope.dragulaItems = [ 
{"Name":"Bob"}, 
{"Name":"Reggie"} 
]; 

我得到2个项目返回正确显示名称字段。我很困惑，因为阵列中有20个项目正在通过，但其中的内容不是。

Answer 1

您正在以错误的方式将项目添加到数组中。您需要创建一个javascript对象并设置不同的属性值，如Name和Price等，并将该对象推送到您的数组。

试试这个。

for (var i in response.Products) { 

    var name = response.Products[i].Name; 
    var price = response.Products[i].Price; 
    var eanBarCode= response.Products[i].EANBarcode; 

    var item = { Name : name , Price : price, EANBarcode: eanBarCode }; 
    $scope.dragulaItems.push(item); 

} 

或者您可以使用angular.forEach进行循环。

angular.forEach(response.Products, function(value, key) { 

    var name = value.Name; 
    var price = value.Price; 
    var eanBarCode = value.EANBarcode; 

    var item = { Name : name , Price : price, EANBarcode: eanBarCode }; 
    $scope.dragulaItems.push(item); 

}); 

Answer 2

您正在将错误的项目推送到数组中。

你必须推对象到数组，而不是字符串其中显示状物体：

for (i in response.Products) { 
    var data = {}; 
    data.Name = response.Products[i].Name; 
    data.ImagePath = response.Products[i].ImagePath; 
    data.EAN = response.Products[i].EANBarcode; 
    data.Price = response.Products[i].Price; 
    data.Offer = response.Products[i].OfferPromotion; 
    data.OfferValid = response.Products[i].OfferValidity; 
    $scope.dragulaItems.push (data); 
}