Simple AngularJs Repeat Example

A simple example of how to set up an AngularJs page that repeats an object.

by Erik Bartlow

HTML

<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>
<div ng-controller="UserController">
    <div class="ui-bar" ng-repeat="user in Family">
         <h3>
                <span>{{ user.Firstname }}</span>
                <span>{{ user.DollarBalance | currency }}</span>
            </h3>

    </div>
</div>

CSS

.ui-bar, .ui-body {
            position: relative;
            padding: .4em 1em;
            overflow: hidden;
            display: block;
            clear: both;
            border: solid 1px #000000;
        }
        .ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 {
            margin: 0;
            padding: 0;
            font-size: 1em;
            display: inline-block;
        }

JavaScript

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

        app.controller("UserController", function ($scope) {
            $scope.CurrentUser = {
                Id: 1,
                Authidentifier: "",
                Email: "[email protected]",
                UserType: 0,
                Firstname: "Erik",
                Lastname: "Bartlow",
                Birthdate: new Date("02/17/1972"),
                PointsBalance: 0,
                DollarBalance: 0.00,
                PIN: "1111"
            };
            $scope.Family = [{
                Id: 1,
                Email: "[email protected]",
                UserType: 0,
                Firstname: "Erik",
                Lastname: "Bartlow",
                Birthdate: new Date("02/17/1972"),
                PointsBalance: 0,
                DollarBalance: 0.00,
                PIN: "1111"
            }, {
                Id: 2,
                Authidentifier: "",
                Email: "[email protected]",
                UserType: 1,
                Firstname: "Ethan",
                Lastname: "Bartlow",
                Birthdate: new Date("10/26/2001"),
                PointsBalance: 20,
                DollarBalance: 20.00,
                PIN: "2001"
            }, {
                Id: 3,
                Authidentifier: "",
                Email: "[email protected]",
                UserType: 1,
                Firstname: "Aidan",
                Lastname: "Bartlow",
                Birthdate: new Date("04/19/2004"),
                PointsBalance: 10,
                DollarBalance: 10.00,
                PIN: "2004"
            }, {
                Id: 4,
                Authidentifier: "",
                Email: "[email protected]",
                UserType: 1,
                Firstname: "Alyssa",
                Lastname: "Bartlow",
                Birthdate: new Date("07/19/2007"),
                PointsBalance: 5,
                DollarBalance: 5.00,
                PIN:...