Question

我有一种潜在的怀疑，我错过了一些基本的东西，但是这里有......

上下文：我的服务器以对象的形式返回一组产品，这些对象包含需要在浏览器中显示的信息。我正在使用ng-repeat来迭代这些对象（所有对象的结构都相同）。

当前状态：服务器正在返回对象。它们以正确的格式记录到我的控制台而没有问题。但是，我的浏览器只显示：

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

欲望：我需要向用户显示这些“产品”（使用来自对象的信息）。

这是我的代码：

对象输出（来自控制台的示例）

0: Object
    asin: "B001LO9TS8"
    listPrice: "$9.99"
    mediumImage: "http://ecx.images-amazon.com/images/I/41Tx19EI3lL._SL160_.jpg"
    offerPrice: "$6.62"
    title: "Gazillion 32 oz Bubbles"
1: Object
    asin: "B00BN4QVF0"
    listPrice: "$8.99"
    mediumImage: "http://ecx.images-amazon.com/images/I/51asVSjyvAL._SL160_.jpg"
    offerPrice: "$5.31"
    title: "Little Kids Fubbles No-Spill Bubble Tumbler, (Colors May Vary)"

控制器文件

$scope.getData = function () {
    $scope.success = $scope.error = null;
    var data = $scope.userSearch;
    data.link = link;
    $http.post('/search/data', data).success( function(results) {
        $scope.success = true;
        $scope.results = results;
        console.dir(results);
    }).error( function(results) {
        $scope.error = results.message;
    });
};

HTML文件

<div data-ng-show="success" class="text-center col-xs-10">
    <div data-ng-bind="results">
        <div class="animate-repeat" ng-repeat-start="result in results" class="col-xs-12 col-md-10">            <table>
                <tbody>
                    <tr>
                        <td>
                            <img ng-src="{{ result.mediumImage }}" style="max-height: 150px;" />
                        </td>
                        <td>
                            <span class="product-descriptor">Title: </span> {{ result.title }}
                            <hr>
                            <span class="product-descriptor">Price: </span> <del><span style="color: 050505;">{{ result.listPrice }}</span></del> <span style="color: red; font-weight: bold;">{{ result.price }}</span> -->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <br ng-repeat-end />
    </div>
</div>

Answer 1

您需要删除ng-bind（<div data-ng-bind="results">），它包含您应该显示列表的后续代码。 ng-bind导致对象列表被字符串化并显示为其textcontent，删除其中的所有ng-repeat及其他代码。你不需要ng-bind。

ngBind属性告诉Angular将指定HTML元素的文本内容替换为给定表达式的值，并在该表达式的值更改时更新文本内容。

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.results = [{
    asin: "B001LO9TS8",
    listPrice: "$9.99",
    mediumImage: "http://ecx.images-amazon.com/images/I/41Tx19EI3lL._SL160_.jpg",
    offerPrice: "$6.62",
    title: "Gazillion 32 oz Bubbles"
  }, {
    asin: "B00BN4QVF0",
    listPrice: "$8.99",
    mediumImage: "http://ecx.images-amazon.com/images/I/51asVSjyvAL._SL160_.jpg",
    offerPrice: "$5.31",
    title: "Little Kids Fubbles No-Spill Bubble Tumbler, (Colors May Vary)"
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">

  <div class="text-center col-xs-10">

    <div class="animate-repeat" ng-repeat-start="result in results" class="col-xs-12 col-md-10">
      <table>
        <tbody>
          <tr>
            <td>
              <img ng-src="{{ result.mediumImage }}" style="max-height: 150px;" />
            </td>
            <td>
              <span class="product-descriptor">Title: </span> {{ result.title }}
              <hr>
              <span class="product-descriptor">Price: </span>  <del><span style="color: 050505;">{{ result.listPrice }}</span></del>  <span style="color: red; font-weight: bold;">{{ result.price }}</span> -->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <br ng-repeat-end />
  </div>

</div>

ng-repeat TypeError：无法读取属性＆＃39; insertBefore＆＃39;为null

1 个答案: