Angularjs 当我们需要显示两个数组时如何使用ng repeat一个是普通字符串另一个是图像

我有两个数组，如下所示

$scope.base64Array=[null, null, "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQ…cmnAgj0PvTTgZJ5osK4w8dahc1MTnOMcnionwR2JNKwXP/9k=", null, null, null];
$scope.products=["Wheat", "LCD Monitor", "Ethernet Cable", "Optical Mouse", "Rice", "Mac Mini RAM 4 GB"];

这里我在base64array中有一个空值，如果它为空，则不需要显示图像，如果我有base64字符串，则需要显示在该图像行中

我的观点是

<ul class="list">

    <li class="item" ng-repeat="i in products" ui-sref="leadProduct" >
        {{i}}
        <br>
        <img ng-show="imgURI === undefined" ng-src="http://placehold.it/100x100">

    </li>
</ul>

{{i}

您可以在repeat中添加一个

track by$index

，这样您就可以知道您所在的索引，然后将其索引到base64Array中

<ul class="list">

    <li class="item" ng-repeat="i in products track by $index" ui-sref="leadProduct" >
        {{i}}
        <br>
        <img ng-show="base64Array[$index] != undefined" ng-src="{{'data:image/png;base64,'+base64Array[$index]}}">
        <img ng-show="base64Array[$index] == undefined" src="http://placehold.it/100x100">
    </li>
</ul>

{{i}

在分配前尝试处理这两个数组，循环Base64数组，删除产品中的空项和同一索引项

var tmp_base64Array = ["/9j/4AAQSkZJRgABAQAAAQABAAD..."];
var tmp_products = ["Ethernet Cable"];

处理后，两个数组将如下所示，然后分配给$scope

编辑：

$scope.products=[
{“name”：“Wheat”，“imgUrl”：null}，
{“名称”：“液晶显示器”，“图像”：“/9j/4AAQSkZJRgABA…”
];


{{product.name}

ng repeat=“i in products track by$index”在这里，您没有提到base64数组，它如何跟踪？如果有空值，那么它应该显示placeholdit大小。如果它有base64字符串，那么它应该显示这样的图像：它正在跟踪产品索引，并在base64数组上使用此索引。然后我放回placehold.it映像。我得到了这个错误GET…rUTk+negnIyDTSSRSAaRz7UEEcmnAgj0PvTTgZJ5osK4w8dahc1MTnOMcnionwR2JNKwXP/9k=404（未找到）我将nc src更新为

{data:image/png；base64'+base64Array[$index]}

这里还有一个代码笔供您查看，实际上我的输出应该提供所有六个名称和placeholdit图像如果存在base64，则显示图像对不起，我不理解您的意思

$scope.products=[{“name”：“Wheat”，“imgUrl”：null}，{“name”：“LCD Monitor”，“imgUrl”：“/9j/4AAQSkZJRgABA…”   ];

{{product.name}

对不起，我弄错了，试着像这样更改数据格式。好的，首先我误解了这个问题，很抱歉搞混了。是否可能像$scope.views=[{“name”：$scope.products，“imgUrl”：$scope.base64Array}]；这样做是因为我从服务器获取产品和base64字符串

$scope.products = [
  { "name": "Wheat", "imgUrl": null }, 
  { "name": "LCD Monitor", "imgUrl": "/9j/4AAQSkZJRgABA..." }
];

<ul class="list"> 
  <li class="item" ng-repeat="product in products" ui-sref="leadProduct" >    
    {{product.name}}
    <img ng-src="{{product.imgUrl || 'http://placehold.it/100x100'}}"> 
  </li> 
</ul>