ng-repeat no function

Benchmark created by JD Smith on November 10, 2013

Description

Preparation HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.1.2/css/foundation.min.css">  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script>

<style> 
body {
    background:#e3e2e2;
}
.options {
    background:#e3e2e2;
    min-height: 190px;
}
.options a {
    display:block;
    color: #9f9f9f;
    padding:12px 10px;
    background:#e3e2e2;
    border-bottom:1px solid #cac9c9;
    position:relative;
    cursor:pointer;
}
.options a:hover {
    color: #8e8e8e;
    background:#f4f4f4;
    -webkit-transition:0.1s linear background;
    -moz-transition:0.1s linear background;
    transition:0.1s linear background;
}
.options a.selected {
    color: #6f6f6f;
    background:#fff;
}
.options a.selected:hover {
    background:#f4f4f4;
}
.options a.selected:after {
    content:"\2713";
    position:absolute;
    right:10px;
    top:50%;
    font-size:20px;
    margin-top:-10px;
}
.options a.no-border {
    border:none;
}
textarea {
    height: 175px;
    width: 100%;
    resize: none;
}
.padtop {
    padding-top: 5px;
}
</style>

<div ng-app="modelDemo">
    <div ng-view></div>

    <!-- CACHE FILE: list.html -->
    <script type="text/ng-template" id="list.html">
        <div class = "row options"> 
            <div class="large-2 columns options"> 
                 <a ng-repeat="author in authorListModel.list" ng-click="selectQuote(author)" ng-class="{selected:author.selected}">{{author.name}}</a>
            </div>
            <div class="large-10 columns end padtop">
                <textarea name="quotetext" id="quotetext" ng-controller="QuoteTextCtrl" readonly>{{authorListModel.selectedAuthor.quote}}</textarea> 
             </div>        
        </div >
    </script>
    
<script type="text/javascript">
angular.module('modelDemo', []).
config(function ($routeProvider) {
    $routeProvider.
    when('/', {
        controller: 'AuthorListCtrl',
        templateUrl: 'list.html'
    }).
    otherwise({
        redirectTo: '/'
    });
});

angular.module('modelDemo').controller("AuthorListCtrl", ['$scope', 'authorListModel', function($scope, authorListModel) {

    $scope.authorListModel = authorListModel
    
    $scope.selectQuote = function(author) {
        authorListModel.setSelectedAuthor(author);
    };
    
    window.r = function() {
        authorListModel.setRandomAuthor();
        $scope.$apply();
    }
    
    $scope.isSelected = function(author) {
        console.log(authorListModel.selectedAuthor);
        return author === authorListModel.selectedAuthor;
    };
}]);

angular.module('modelDemo').controller("QuoteTextCtrl", ['$scope', 'authorListModel', function($scope, authorListModel) {
    $scope.authorListModel = authorListModel;
}]);

angular.module('modelDemo').service("authorListModel", [function() {
    var fowler = {
            name: "Fowler",
            quote: "Any fool can write code that a computer can understand. Good programmers write code that humans can understand."
        },
        twain = {
            name: "Twain",
            quote: "Why, I have known clergymen, good men, kind-hearted, liberal, sincere, and all that, who did not know the meaning of a 'flush.' It is enough to make one ashamed of one's species."
        },
        poe = {
            name: "Poe",
            quote: "Deep into that darkness peering, long I stood there, wondering, fearing, doubting, dreaming dreams no mortal ever dared to dream before."
        },
        plato = {
            name: "Plato",
            quote: "All things will be produced in superior quantity and quality, and with greater ease, when each man works at a single occupation, in accordance with his natural gifts, and at the right moment, without meddling with anything else. "
        };
    
    this.list = [fowler, twain, poe, plato];
    
    this.selectedAuthor = null;
    this.previousSelection = null;
    this.setSelectedAuthor = function(author) {
        if(this.list.indexOf(author) > -1) {
            this.selectedAuthor = author;
            author.selected = true;
            if (this.previousSelection !== author && this.previousSelection !== null){
                this.previousSelection.selected = false;
            }
            this.previousSelection = author;
        }
    };
    this.setRandomAuthor = function() {
        var idx = Math.floor(Math.random() * this.list.length);
        this.setSelectedAuthor(this.list[idx]);
        console.log(this.selectedAuthor);
    };
            
}]);


</script>

</div>

Setup

window.r = function () {};

Test runner

window.r();

r();

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by JD Smith on November 10, 2013