Angular JS Sample 2

Sample for blog

by andyjmeyers

HTML

<html ng-app='solarSystemApp'>
    <body ng-controller='orbitController'>
        <h1>{{parentObject.Name}}</h1>
        <h3>Orbiting Objects</h3>
        <ul>
            <li ng-repeat="object in parentObject.Children">
                <div>{{object.Name + ' - ' +  object.Type}}</div>
                             <div>{{object.Orbit | displayInDays}}.  That's {{object.Orbit | displayInYears | number:4}} years!!!1</div>
                <div><input type='text' ng-model="object.Type" /></div>
            </li>
        </ul>
    </body>
</html>

JavaScript

angular.module('solarSystemApp.service', []);

angular.module('solarSystemApp.directive', []);
  
angular.module('solarSystemApp.filter', []).filter('displayInDays', 
    function (){
        return function(value){
            if (value){
                return value + " Days to orbit."
            }
            else
            {
                return "This has no orbit";
            }
        }
    }).filter('displayInYears', function(){
        return function(value){
            if (value && !isNaN(value)){
                return (value / 365.0);
            }
            else{
            }
        }
    });

var app = angular.module('solarSystemApp', ['solarSystemApp.service', 'solarSystemApp.directive', 'solarSystemApp.filter']).
  run(function () {
      // This is effectively part of the main method initialization code
      
  });

app.controller('orbitController', ['$scope', function orbitController(scope){
    scope.parentObject = {Name: 'Sun', Type: 'Star',
        Children: [{Name: 'Mercury', Type: 'Planet', Orbit: 88}, {Name: 'Venus', Type: 'Planet' , Orbit: 244 }, 
            {Name: 'Earth', Type: 'Planet' , Orbit: 365}, {Name: 'Mars', Type: 'Planet' , Orbit: 687}, 
            {Name: 'Jupiter', Type: 'Planet', Orbit:  4332}, {Name:'Saturn', Type: 'Planet', Orbit: 10833},
            {Name: 'Uranus', Type: 'Planet', Orbit: 30800}, {Name: 'Neptune', Type: 'Planet', Orbit: 60190},
            {Name: 'Pluto', Type: 'Dwarf Planet', Orbit: 90520}]};

}]);