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

我认为你正在寻找ng-class。

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

如果你的表达式为真，它将使用halfCard作为类，如果它是假的，它将使用卡。

Answer 2

您可以让所有卡片都有display:inline-block。这样，他们并排。然后在您的数据中，指出它是一个完整还是一半。使用ng-repeat时，使用该指示符告诉模板是使用全部还是半部分。一个完整的宽度为100％，一半的宽度为50％。 50％的产品将并排排列，而完整产品将由于容器的尺寸限制而不足。

Answer 3

我认为这将高度依赖于您的数据集以及它是如何回归的。您很可能需要预先分类或进行某种处理，以便您希望显示的项目为“半”。卡片至少是成对的，或者你会有随机的间隙。

以下是具有半尺和全尺寸卡片概念的plunker。 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中更改模板？

3 个答案: