Question

如何根据所选数据显示数据， ng-repeat？

.. ng-repeat =“img in ht.images 其中id in（1,2,3）”＆gt;

<div class = "panel-body">
<div ng-repeat=" img in images">
    <img src="http://photo/{{img.path}}" alt="">
</div>
Panel content

sql：

中的示例

SELECT * FROM Images WHERE Id IN（1,2）;

<小时/> 的更新： sql中的示例SELECT * FROM Images WHERE Id IN（1,2,3）;

我尝试过ng-repeat，但是重写代码需要做很多工作

    <div ng-repeat=" img in ht.images" ng-if="$index==0">
        <img ng-src="http://photos.com/foler/{{img.path}}" alt="">
    </div>
    <div ng-repeat=" img in ht.images" ng-if="$index==1">
        <img ng-src="http://photos.com/foler/{{img.path}}" alt="">
    </div>
    <div ng-repeat=" img in ht.images" ng-if="$index==2">
        <img ng-src="http://photos.com/foler/{{img.path}}" alt="">
    </div>

    "images": [{
    "path": "00/abc1.jpg",
    "order": 1
    }, {
    "path": "00/abc2.jpg",
    "order": 2
    }, {
    "path": "00/abc3.jpg",
    "order": 3
    }]

上一个问题How to display the first data in ng-repeat?

Answer 1

您应该阅读ngSrc。基本上：

在src属性中使用像{{hash}}这样的Angular标记并不起作用右：浏览器将使用文字文本从URL中获取 {{hash}}直到Angular替换{{hash}}中的表达式。该 ngSrc指令解决了这个问题。

<强>更新：

这是一个显示几张图片的简单代码：

<强> AngularJS

a = 10/3

print a
3

<强> HTML

var myApp = angular.module("myApp", []);

myApp.controller("ctrl", ['$scope', function ($scope){
    $scope.images = [{
    "path": "https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg",
    "order": 1
    }, {
    "path": "http://newsitems.com/wp-content/uploads/2016/03/2-36.jpeg",
    "order": 2
    }, {
    "path": "https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi",
    "order": 3
    }];
}]);

你可以see the demo

Answer 2

您可以使用ng-show和ng-src代替src指令：

<div class = "panel-body">
   <div ng-show="img.id == 1 || img.id == 2" ng-repeat="img in images">
      <img ng-src="http://photo/{{img.path}}" alt="">
   </div>
</div>

希望有帮助=）

Answer 3

这是控制器部分：

    $scope.selectedId = [1,2,3];

    $scope.filterById = function(img) {
        return ($scope.selectedId.indexOf(img.id) !== -1);
    };

这是html

<div ng-repeat="img in images | filter:filterById ">
    <img ng-src="http://photo/{{img.path}}" alt="">
</div>

Answer 4

你可以检查控制器，其中id是例子1然后插入另一个列表然后在html中重新列表这个列表

如何在ng-repeat中显示所选数据

4 个答案: