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

Question

我有两个数组，如下所示

$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 中有一个 null 值，如果它是 null 则不需要显示图像，如果我有 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>

Answer 1

您可以在重复中添加一个 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>

Answer 2

尝试在赋值前处理这两个数组，循环base64Array，删除null项和products中相同的索引项。

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

处理完两个数组就这样，然后赋值给$scope。

编辑：

$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>

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

How to use ng-repeat when we need to display two array one is normal string another is image

angularjs

ionic