Question

我获得了一个项目列表，并循环了这样的HTML代码。（粘贴的html片段因其冗长而不完整）

<div class="row"   ng-repeat="recentuseraddress in timeline"  >
    <div class="address col-xs-12 col-sm-8 pull-left"  >
        <p><a href="<?php echo base_url(); ?>property/index/{{recentuseraddress.home_id}}">
                <img ng-src="<?php echo base_url(); ?>images/maps/{{recentuseraddress.propertyimg}}" height="50" width="50">
            </a>
        <p>{{recentuseraddress.updated_time}}</p><br>{{recentuseraddress.recent_connect_address}} <span>{{recentuseraddress.recent_connect_postcode}}</span></p>
    </div>
    ......

你可以在html中看到图片标签，基本上它会打印我列表中的所有图片。

现在在同一页面的不同位置，我需要从相同的角度js {{recentuseraddress.propertyimg}} 随机中仅获取一张图片。

是否有任何直接的角度js方法从列表中随机提取项目？

谢谢。

Answer 1

使用：

$scope.randomImage= $scope.recentuseraddress.propertyimg[Math.floor(Math.random() * $scope.recentuseraddress.propertyimg.length)];

在视图中： {{randomImage}}

Answer 2

您应该从控制器的时间轴中选择随机元素。我根据你的代码片段模拟了你的情况并编写了这个例子。

angular.module('app',[])
  .controller('mainController',function($scope){
  var timeline = [
    {home_id:1,propertyimg:'img1.jpg'},
    {home_id:2,propertyimg:'img2.jpg'},
    {home_id:3,propertyimg:'img3.jpg'}
  ];
  $scope.timeline=timeline;
  $scope.randomRecentUserAddress = timeline[Math.floor(Math.random() * timeline.length)];
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-app="app" ng-controller="mainController">
  <h1>Timeline</h1>
  <pre>
    {{timeline}}
  </pre>
  <h1>Random</h1>
  <pre>
    {{randomRecentUserAddress}}
  </pre>
  <img ng-src="{{randomRecentUserAddress.propertyimg}}"/>
</body>
</html>

从角度js列表中随机选择一个项目

2 个答案: