Question

我正在尝试从ajax响应中构建多个div。以下是我正在使用的模块。

angular.module('appBuyItemModule', [])
    .controller('buyItemController', ['$scope', '$http', function ($scope, $http) {

        $scope.init = function () {
            $http({
                method: 'GET',
                url: '/get-items',
                contentType: 'application/json',
            }).success(function (response) {

                for (let index = 0; index < response.length; index++) {
                    console.log(response[index]["item_name"]);
                    console.log(response[index]["item_brand"]);
                    console.log(response[index]["item_picture"]);
                    console.log(response[index]["item_description"]);
                    console.log(response[index]["item_quantity"]);

                    //Build the divs...
                }
                console.log('Success!!');
            }).error(function () {
                console.log('Error!!');
            });
        };
    }]);

div应该内置在for循环中，并且它们必须允许onClick事件。我已使用静态html将其添加，并且事件已成功触发，但我想将以下html代码替换为angularJS：

<div class="col-md-3 col-sm-6 hero-feature">
  <div class="thumbnail">
      <img src="https://dsw.scene7.com/is/image/DSWShoes/377442_007_ss_01?$pdp-image$" alt="">
      <div class="caption">
          <h3>2-Feature Label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <p>
              <button name="pink_shoes" ng-controller="buyItemController" class="btn btn-primary"
                      ng-click="info.item_number = 'item_2'; buy()">Buy Now
              </button>
              <button ng-controller="shopController" class="btn btn-default" ng-click="confirm()">More info
              </button>
          </p>
      </div>
  </div>
</div>

例如：在“ ng-click =“ info.item_number ='item_2'; buy（）“，我想将'item_2'替换为'response [index] [” item_name“]'，图片链接为json响应等。任何人都可以指出正确的方向吗？

我设法使其部分可以在JavaScript中工作，但是它看起来确实很糟糕，并且不起作用。请看下面：

let itemsContainer = document.getElementById('items-container');
let ele = document.createElement('div');

itemsContainer.appendChild(ele);

    ele.innerHTML = "<div class=\"col-md-3 col-sm-6 hero-feature\">\n" +
        "<div class=\"thumbnail\">\n" +
        "<img src=\"https://dsw.scene7.com/is/image/DSWShoes/377442_007_ss_01?$pdp-image$\" alt=\"\">\n" +
        "<div class=\"caption\">\n" +
        "<h3>2-Feature Label</h3>\n" +
        "<p>response[index][\"item_description\"]</p>\n" +
        "<p>\n" +
        "<button name=\"response[index][\"item_brand\"]\" ng-controller=\"buyItemController\" class=\"btn btn-primary\"\n" +
        "        ng-click=\"info.item_number=\"response[index][\"item_name\"]\";buy()\">Buy Now\n" +
        "</button>\n" +
        "<button ng-controller=\"shopController\" class=\"btn btn-default\" ng-click=\"confirm()\">More info\n" +
        "</button>\n" +
        "</p>\n" +
        "</div>\n" +
        "</div>\n" +
        "</div>";

Answer 1

根据您的要求，您需要使用ng-repeat标签，该标签将遍历对象数组并以HTML显示，请检查以下示例，让我知道是否有任何查询。

var app = angular.module('myApp', []).controller('MainCtrl', function MainCtrl($scope) {
  $scope.records = [{
    "Name": "Alfreds Futterkiste",
    "Country": "Germany",
    image: "https://via.placeholder.com/150"
  }, {
    "Name": "Berglunds snabbköp",
    "Country": "Sweden",
    image: "https://via.placeholder.com/150"
  }, {
    "Name": "Centro comercial Moctezuma",
    "Country": "Mexico",
    image: "https://via.placeholder.com/150"
  }, {
    "Name": "Ernst Handel",
    "Country": "Austria",
    image: "https://via.placeholder.com/150"
  }];

  $scope.onClick = function(item) {
    console.log('from event', item);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
  <ul>
    <li ng-repeat="record in records">
      {{record.Name}}<br>
      <buton ng-click="onClick(record)"><img ng-src="{{record.image}}" alt="asdf"></buton><br> {{record.Country}}
      <br>
      <hr>
    </li>
  </ul>
</div>

使用JSON响应中的有效ng-click操作构建div

1 个答案: