Demonstrate differences in foreach of an object

by vaiism

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
<p>Object Iteration</p>
<hr/>
<div ng-app="objectTest" ng-controller="ObjectIteration" ng-cloak>
    <p>
        <b>AngularVersion:</b> {{angularVersion.full}}<br/>
        <b>Test Object:</b> {{testObject | json}}
    </p>
    
    <div class="testOutput">
        <h4>Angular output of the object</h4>
        <span ng-bind-html-unsafe="getOutputTheAngularWay()"></span>
    </div>
    
    <div class="testOutput">
        <h4>jquery output of the object</h4>
        <span ng-bind-html-unsafe="getOutputTheJQueryWay()"></span>
    </div>


</div>

CSS

body {
    padding: 10px; 
    font-family: sans-serif; 
    font-size: 0.8em;
}
ul li {
    list-style: disc; margin-left:20px;
}
h4 { font-weight: bold;margin-bottom:5px; }
.testOutput {
    border: solid 1pt #ccc;
    margin:15px 5px;padding:5px;background-color:#eee;  
}

JavaScript

var settingsModule = angular.module('objectTest', []);

function ObjectIteration($scope) {
    $scope.angularVersion = angular.version;
    $scope.testObject = {
        number: true,
        min: false,
        max:false
    };
    
    // Angular way:
    $scope.getOutputTheAngularWay = function() {
        console.debug('Testing the way...');
        console.debug('  object: ' + JSON.stringify(this.testObject));
        var output = '<ul>';
        angular.forEach(this.testObject, function(type, value) {
            output += '<li>Type: ' + type + ', value: ' + value + '</li>';
        });
        output += '</ul>';
        return output;
    };
    
    $scope.getOutputTheJQueryWay = function() {
        console.debug('Testing the way...');
        console.debug('  object: ' + JSON.stringify(this.testObject));
        var output = '<ul>';
        $.each(this.testObject, function(type, value) {
            output += '<li>Type: ' + type + ', value: ' + value + '</li>';
        });
        output += '</ul>';
        return output;
    };
}