时间戳

首页 > 解决方案 > 尝试在 Angular 表的列中加载值列表

html - 尝试在 Angular 表的列中加载值列表

问题描述

我正在努力找出自己做错了什么，主要是因为我是新手，所以对 AngularJS 没有很好的理解。主要目标是我试图在前端列出附加文本列表中的所有值，但它似乎导致了这个错误的问题：

错误：[$http:badreq] Http 请求配置 url 必须是字符串或 $sce 可信对象。已收到： []

上下文：我的应用程序中有一个依赖于 API 的表，此变量包含一个列表并输出以下内容：

{
  "name": "TEST",
  "description": "TEST",
  "additionalText": [
    {
      "name": "TEST",
      "description": "TEST",
      "lockId": 0
    }
    {
      "name": "TEST",
      "description": "TEST",
      "lockId": 0
    }
  ],
  "lockId": 0
}

API 按预期工作，我可以成功执行所有必要的 REST 调用。所以我并没有为此苦苦挣扎，前端是我遇到一些困难的地方。

HTML：

<td data-title="'additionalTexts'" sortable="'additionalTexts'">
    <span ng-repeat="additionalText in additionalTextList[entity.name]">
        <i>{{additionalText.name}}</i><br>
    </span>
</td>

AngularJS：

 $scope.refreshTextTable= function() {
    SpringDataRestService.query(
        {
            collection: "APIURL"
        },
        function (response) {
            var additionalTextRoles = response;
            $scope.textTableOptions = new NgTableParams({}, {
                dataset: additionalTextRoles,
                counts: [],
            });
            // Also populate a list of all linked roles
            for (var i = 0; i < additionalTextRoles.length; i++) {
                var additionalTextRole = additionalTextRoles[i];

                // This approach allows you to inject data into the callback
                $http.get(additionalTextRole.additionalText).then((function (additionalTextRole) {
                    return function(response) {
                        $scope.additionalTextList[additionalTextRole.name] = response.additionalText;

                    };
                })(additionalTextRole));
            }
        },
        function (response) {
            // TODO: Error Handling
        }
    );
};

任何帮助将不胜感激，我真的很努力解决这个问题。

标签： htmlangularjs

解决方案

你可以试试下面的代码：

$scope.refreshTextTable = function() {
  SpringDataRestService.query({
      collection: "APIURL"
    },
    function(response) {
      var additionalTextRoles = response;
      $scope.textTableOptions = new NgTableParams({}, {
        dataset: additionalTextRoles,
        counts: [],
      });
      // Also populate a list of all linked roles
      for (var i = 0; i < additionalTextRoles.length; i++) {
        var additionalTextRole = additionalTextRoles[i];

        // This approach allows you to inject data into the callback
        $http.get(additionalTextRole.additionalText).then((function(additionalTextRole) {
          return function(response) {
            $scope.additionalTextList = response.additionalText;

          };
        })(additionalTextRole));
      }
    },
    function(response) {
      // TODO: Error Handling
    }
  );
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>

<td data-title="'additionalTexts'" sortable="'additionalTexts'">
  <span ng-repeat="additionalText in additionalTextList">
      <i>{{additionalText.name}}</i><br>
  </span>
</td>

推荐阅读