Question

我是AngularJS的新手，我正在创建一个应用程序，我想创建一个用户网格，如下所示。这是我试图实现它的代码。

<div class="main" ng-controller="HomeController">
<div class="container">
<div class="user" ng-repeat="user in users">
<span class="person"> {{ users.person }}</span>
<span class="title"> {{ users.title }}</span>
<span class="date"> {{ users.date }}</span>
</div>
</div>
</div>

Answer 1

您可以使用带角度的角度材质来复制它并使用md-list-item

<md-content>
        <md-list>
          <md-list-item class="md-3-line" ng-repeat="user in users" ng-click="null">
            <img ng-src="{{user.person}}?{{$index}}" class="md-avatar" alt="{{item.who}}" />
            <div class="md-list-item-text" layout="column">
              <h3>{{ user.who }}</h3>
              <h4>{{ user.title }}</h4>
              <p>{{ user.date }}</p>
            </div>
          </md-list-item>
          <md-divider inset></md-divider>
        </md-list>
      </md-content>

<强> DEMO

angular.module('webapp', ['ngMaterial'])
  .controller('AppCtrl', function($scope) {
    $scope.users = [];
    for (var i = 0; i < 45; i++) {
      $scope.users.push({
        person: 'https://avatars0.githubusercontent.com/u/598463?v=3&s=60',
        title: "Brunch this weekend?",
        date: new Date()
      });
    }
  });

<!DOCTYPE html>
<html ng-app="webapp">
<head>
  <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.min.css">
  <link rel="stylesheet" href="style.css" />
  <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js"></script>
  <script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
  <div layout="column" layout-fill flex style="max-height:100%">
    <md-toolbar>
      <div class="md-toolbar-tools">
        <div flex="50">
          <h3 class="title"><span>Users List</span></h3>
        </div>
      </div>
    </md-toolbar>
    <div flex layout="column" style="position:relative">
      <md-content>
        <md-list>
          <md-list-item class="md-3-line" ng-repeat="user in users" ng-click="null">
            <img ng-src="{{user.person}}?{{$index}}" class="md-avatar" alt="{{item.who}}" />
            <div class="md-list-item-text" layout="column">
              <h3>{{ user.who }}</h3>
              <h4>{{ user.title }}</h4>
              <p>{{ user.date }}</p>
            </div>
          </md-list-item>
          <md-divider inset></md-divider>
        </md-list>
      </md-content>
    </div>
  </div>
 </body>
</html>

Answer 2

这不是一个Angular或Javascript问题。我建议KISS（Keep It Simple Silly）。无需为此提供库，jQuery，Material，Bootstrap和其他厨房。

（显然根据您的需要调整CSS。这只是一个演示。）

HTML：

<body ng-controller="MainCtrl as $ctrl">
  <section ng-repeat="person in $ctrl.people" class="person">
    <figure class="person__image"><img ng-src="{{ ::person.img }}"></figure>
    <div class="person__data">
      <h4 ng-bind="::person.name"></h4>
      <small ng-bind="::person.date"></small>
    </div>
  </section>
</body>

CSS：

.person {
  display: flex;
  font-family: sans-serif;
  align-items: center;
  border: 1px solid #ccc;
  margin: 10px auto;
}

.person__image {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  overflow: hidden;
}

h4 {
  margin: 0 0 20px;
}

JS：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  this.people = [
    {
      name: 'Joe',
      img: '//placehold.it/100x100',
      date: new Date()
    },
    {
      name: 'Mary',
      img: '//placehold.it/100x100',
      date: new Date()
    },
    {
      name: 'Same',
      img: '//placehold.it/100x100',
      date: new Date()
    }
  ]
});

Plunkr：

http://plnkr.co/edit/fdMs46B4bo58Bi7Y4VyF?p=preview

如何在AngularJS中创建网格？

2 个答案: