将数组写入$scope(Javascript）

Writing Array To $scope (Javascript)

本文关键字：Javascript scope 数组更新时间：2023-09-26

我正在修改Altair材料设计模板(http://themeforest.net/item/altair-admin-material-design-premium-template/12190654)&具有以下Angular JS控制器。

我正在成功地调用API&在for循环中创建变量。然后我想把它们写到$scope.dragulaItems中。这在控制台日志中似乎很好，但数组没有在页面上正确显示。

htmldiv如下：

            <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个项目，但其中的内容没有通过。

您以错误的方式向数组中添加项。您需要创建一个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);
});

您将错误的项推入数组。

您必须将对象推入数组，而不是像对象一样显示的字符串：

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);
}