如何使用多个接收到的数组正确设置 ng-repeat

Posted 2023-03-14

【中文标题】如何使用多个接收到的数组正确设置 ng-repeat

【英文标题】：how to correctly setup ng-repeat with multiple received arrays

【发布时间】：2018-01-12 20:43:06

【问题描述】：

当我从 php 接收到一些数组时，我在 Angular 中设置 ng-repeats 时遇到问题。谁能给我解释一下？我想为数组的一个位置设置一个 div。感谢您的友好回复，这是代码：

角度

 <div ng-app="ReportRequest" ng-controller="InsertRequest" id="pos">
    <div ng-repeat="row in report.articles.rows" class="position articles">
       <p ng-bind="row"></p
    </div>

Angular ajax 请求（工作正常）

var RequestApp = angular.module('ReportRequest',[]);

RequestApp.controller('InsertRequest', function ($scope, $http) 
$http.get("functions.php", 
).then(function success(response) 
    $scope.report = response.data.rows;
  )
);

PHP（有什么错误吗？）

<?php

header('Content-Type: application/json');

require_once  'db_connect.php';

function retrieveArticle($conn)


$prep_stmt = "SELECT * FROM blog";
$stmt = $conn->prepare($prep_stmt);

if ($stmt) 
    $stmt->execute();
    $result = $stmt->get_result();
    //$num_of_rows = $result->num_rows;

    while ($row = $result->fetch_assoc()) 
        //$id = $row['id'];
        $article[] = $row['article'];
    




$stmt->free_result();
$stmt->close();

return $article;


$articles = array(retrieveArticle($conn));
$report = array('rows' => $articles);
echo json_encode($report);

接收到的数据：（json格式） "rows":[["Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nec nulla at pretium. Suspendisse viverra tempus malesuada. In at imperdiet ipsum, eu ornare mi. Etiam eget massa ac est dapibus aliquam. Donec pharetra vehicula libero vulputate tristique。Nullam quam est，ultricies et varius pulvinar，hendrerit rhoncus ex。Integer urna leo，pellentesque non sapien ut，scelerisque imperdiet magna。 Suspendisse viverra tempus malesuada. In at imperdiet ipsum, eu ornare mi. Etiam eget massa ac est dapibus aliquam. Donec pharetra vehicula libero vulputate tristique. Nullam quam est, ultricies et varius pulvinar, hendrerit rhoncus ex. Integer urna leo, pellentesque non sapien ut scelerisque imperdiet magna。 psum, eu ornare mi. Etiam eget massa ac est dapibus aliquam。 Donec pharetra vehicula libero vulputate tristique。 Nullam quam est，ultricies et varius pulvinar，hendrerit rhoncus ex。整数 urna leo，pellentesque non sapien ut，scelerisque imperdiet magna。"]]

【问题讨论】：

您的代码中是否真的缺少>？ (<p ng-bind="row"></p)

@AlonEitan 是的，谢谢，但这仍然不能解决问题

ng-repeat="row in report" 呢？我在 PHP 数组中没有看到任何 articles 键，您将 rows 直接保存到 $scope.report

@AlonEitan 我编辑了 ng-repeat 但我已经有了 $scope.report = response.data.rows;在 js 中它不会出现，edit 当只有“报告中的行”时，它向我展示了这个 [“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nec nulla at pretium. Suspendisse viverra tempus malesuada。在 inperdiet ipsum, eu ornare mi...

上次尝试解决 :) 在 PHP echo json_encode(array('rows' => retrieveArticle($conn))); 上尝试以下操作（而不是 php 代码的最后 3 行），将 ng-repeat="row in report.articles.rows" 更改为 ng-repeat="row in report" 和 <p ng-bind="row"></p 更改为 @987654335 @ - 有什么变化吗？

【参考方案1】：

根据您提供的 json 示例，是一个数组数组。所以你需要使用两次重复来渲染那些 json 我用 ul 举了一个例子。试用。这对我有用。

控制器

$scope.report = 
  "rows": [
    [
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nec nulla at pretium. Suspendisse viverra tempus malesuada. In at imperdiet ipsum, eu ornare mi. Etiam eget massa ac est dapibus aliquam. Donec pharetra vehicula libero vulputate tristique. Nullam quam est, ultricies et varius pulvinar, hendrerit rhoncus ex. Integer urna leo, pellentesque non sapien ut, scelerisque imperdiet magna.",
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nec nulla at pretium. Suspendisse viverra tempus malesuada. In at imperdiet ipsum, eu ornare mi. Etiam eget massa ac est dapibus aliquam. Donec pharetra vehicula libero vulputate tristique. Nullam quam est, ultricies et varius pulvinar, hendrerit rhoncus ex. Integer urna leo, pellentesque non sapien ut, scelerisque imperdiet magna.",
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit nec nulla at pretium. Suspendisse viverra tempus malesuada. In at imperdiet ipsum, eu ornare mi. Etiam eget massa ac est dapibus aliquam. Donec pharetra vehicula libero vulputate tristique. Nullam quam est, ultricies et varius pulvinar, hendrerit rhoncus ex. Integer urna leo, pellentesque non sapien ut, scelerisque imperdiet magna."
    ]
  ]

HTML

   <ul ng-repeat="item in report.rows" class="position articles">
       <li>$index
       <ul>
         <li ng-repeat="(key, value) in item track by $index">
         $index + '-'+value
       </li>
       </ul>
    </ul>