Angular JS ajax 和 php 数据解析错误

Question

基本上我遇到了一个问题，我从 HTML 输入中获取了多个文件。单击提交按钮时，这些文件路径的动态数组已生成，然后我对该动态生成的数组进行 JSON 编码，并将其插入数据库表中。直到数据库插入它都很好，但是当我检索该数组时出现问题，使用角度 js http 调用，该数组被视为一个字符串，然后我将其 JSON.parse 转换为数组，因此 $scope. im 基本上是包含已解析数组的数组。

现在，我正在动态地制作 html 元素，它们是根据 ajax 调用的响应来填充的，我在数据库中的记录与制作的元素一样多，但是在每个元素中都有一个图像位置，我想将第一个图像放在子数组中的每个元素上。就像在第一个元素上我想从子数组 1 第 0 个元素文件/文件/img1.jpg 中放置图像一样，在第二个元素上我想从子数组 2 第 0 个元素文件/file1/img1.jpg 中放置图像等等...

这些是动态制作的元素，透明的是图像部分。

这就是我解析数组的方式。

$http({
    	method:"POST",
    	url:"files.php",
    	data:$.param({
            tot_data:true
    	}),
    	headers:headers
    }).then(function(res){
    	$scope.d = res.data;
        $scope.im=[];

       for(var i=0; i<$scope.d.length; i++){
	      $scope.im = JSON.parse($scope.d[i].imgs);
          console.log($scope.im[i]);
       }

    });

这是我在控制台上得到的结果：

但是当我把它放在 html 中时

<p>{{im[0]}}</p>

我仍然在每个元素上得到相同的路径，而不是控制台上显示的结果

Answer 1

使用以下代码设法遍历您的数组

JS

    $scope.test = ["files/file3/img1.jpg","files/file3/img2.jpg","files/file3/‌​img3.jpg","files/fil‌​e3/img4.jpg"];

HTML

<ul>
  <li ng-repeat="t in test">
     <div>
          <b>{{t}}</b>
     </div>
  </li>
</ul>

输出：

有了这个，您应该能够显示所有图像。 （将 ng-repeat 集成到您想要的任何元素中）。

基本上，如果您从以下问题中获取代码，您可能会有类似

HTML

<div ng-repeat="files in im"> 
    <<ul>
      <li ng-repeat="f in files">
         <div>
               <img ng-src="{{f}}" alt="Your wonderful image" />
         </div>
      </li>
    </ul>

</div>

JS

$scope.im = [

 ["files/file/img1.bmp", "files/file/img2.jpg", "files/file/img3.jpg", "files/file/img4.jpg", "files/file/img5.jpg", "files/file/img6.jpg", "files/file/img7.jpg", "files/file/img8.jpg", "files/file/img9.jpg"],

 ["files/file1/img1.jpg", "files/file1/img2.jpg", "files/file1/img3.jpg", "files/file1/img4.jpg", "files/file1/img5.jpg", "files/file1/img6.jpg", "files/file1/img7.jpg", "files/file1/img8.jpg", "files/file1/img9.jpg"],

 ["files/file2/img1.jpg", "files/file2/img2.jpg", "files/file2/img3.jpg", "files/file2/img4.jpg", "files/file2/img5.jpg", "files/file2/img6.jpg", "files/file2/img7.jpg", "files/file2/img8.jpg", "files/file2/img9.jpg"]

];

希望这会有所帮助。