ng:repeat with directive

loop over tr element with twoWaysDataBinding

by Krzysztof Safjanowski

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div ng-app="address">
    <div ng-controller="address">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <td>Street</td>
                    <td>Number</td>
                </tr>
            </thead>
            <tr street="details" ng-repeat="details in streets()">
            </tr>
        </table>
        <form class="well">
            <input type="text" ng-model="address.street" />
            <input type="text" ng-model="address.number" />
            <button class="btn btn-primary" ng-click="addAddress()">Add address</button>
        </form>
    </div>
</div>

JavaScript

angular.module('address', [])
    .controller('address', function ($scope, addressContainer) {

    $scope.streets = addressContainer.getAddress;

    $scope.addAddress = function () {
        addressContainer.addAddress($scope.address)
        $scope.address = {};
    };
})
    .directive('street', function () {
    return {
        restrict: 'A',
        template: '<td>{{ info.street }}</td><td>{{ info.number }}</td>',
        scope: {
            info: '=street'
        }
    };
})
    .service('addressContainer', function () {
    var streets = [{
        street: 'Sikorskiego',
        number: '14/39'
    }, {
        street: 'Wawrzynca',
        number: '3a/39'
    }];

    this.addAddress = function (address) {
        streets.push(address)
    };

    this.getAddress = function () {
        return streets;
    };

});