如何在 ng-repeat 中更改模板？

Question

我是 Angular 的新手，所以也许我想要实现的目标是不可能的？非常感谢任何帮助。

我要实现的布局如下所示：

这是一个 plnkr 示例，我一直在尝试更新但没有成功。

var app = angular.module('plunker', []).
controller('myController', function ($scope, $http) {
    $http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows=5&fname={firstName}&lname={lastName}").
    success(function (data) {
        $scope.users = data
    })
});

.card {
    padding: 20px;
    margin: 10px 0;
    border: 1px solid;
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>

  <body>
<div>
    <div ng-controller="myController">
        <div ng-repeat="user in users" class="row">
            <div class="card">
            {{user.fname}} {{user.lname}} 
            </div
        </div>
    </div>
  </body>

</html>

Answer 1

你可以让所有卡片都有 display:inline-block。这样，他们并排走。然后在您的数据中，指出它是完整的还是半的。当您使用 ng-repeat 时，使用该指示符来告诉模板是使用完整的还是半的。一个完整的宽度为 100%，一半的宽度为 50%。 50% 的将并排排列，而由于容器的大小限制，满的总是会被压下。

Answer 2

我想你在找 ng-class.

<div ng-repeat="user in users" class="row">
        <div ng-class="yourExpression ? 'halfCard' : 'card'>
        {{user.fname}} {{user.lname}} 
        </div>
    </div>

如果 yourExpression 为真，它将使用 halfCard 作为 class，如果为假，它将使用卡片。

Answer 3

我认为这在很大程度上取决于您的数据集及其返回方式。您很可能需要对其进行预分类或进行某种处理，以便您想要显示为 'half' 卡片的项目至少始终成对，否则您将有随机间隙。

这是一个只有一半和全尺寸卡片概念的笨蛋。 http://plnkr.co/edit/RbUyIzUbxhg7gJmUfYO5

<div ng-repeat="user in users" class="row">
    <div class="card" ng-class="user.half ? 'half' : 'full'">
      {{user.fname}} {{user.lname}}
    </div>
    <div class="clearfix"></div>
  </div>

我建议你把它们分开，这样所有的全尺寸卡片都放在一起，所有半尺寸的卡片都放在一起。可以将它们交织在一起，但就像我之前说的那样，您必须先操作数组，使它们成对出现。

如何在 ng-repeat 中更改模板？

How to change template in ng-repeat?

javascript

angularjs

ng-repeat

angularjs-ng-repeat