/angularjs/

AngularJS - Controller Example

2014-05-11 12:55:51

Inspired by: https://github.com/curran/screencasts/tree/gh-pages/introToAngular My code: https://github.com/szalek/AngularJS-Controller-Example

var app = angular.module('szalekApp', []);

app.controller("NameCtrl", function ($scope) {
    $scope.hello = "Welkome welkome!";
    $scope.names = ['Michal' , 'Ewa', 'Jakub'];

    $scope.addName = function () {
        $scope.names.push($scope.newName);
        $scope.newName = "";
    }

    $scope.removeName = function (name) {
        var i = $scope.names.indexOf(name);
        $scope.names.splice(i, 1);
    }
});

app.controller("CountryStaticCtrl", function ($scope) {
    $scope.countries = [
        {"name": "China", "population": 1359821000},
        {"name": "India", "population": 1205625000},
        {"name": "United States of America", "population": 312247000}
    ];
});

app.controller("CountryCtrl", function ($scope, $http) {
    $scope.orderField = 'population';
    $scope.orderReverse = true;
    $http.get('countries.json').success(function (data) {
        $scope.countries = data;
    });
});

<html ng-app='"szalekApp"'>
<head>
<meta charset="utf-8"/>
<title>Angular.js Example</title>
<script src='"angular.min.js"'></script>
<script src='"app.js"'></script>
</head>
<body>
<section ng-controller='"NameCtrl"'>
<h1>{{hello}}</h1>
<ul>
<li in="" names&quot;="" ng-repeat='"name'>
                {{name}}
                <a href='""' ng-click='"removeName(name)"'>delete</a>
</li>
</ul>
<form ng-submit='"addName()"'>
<input ng-model='"newName"/' type='"text"'/>
<input type='"submit"/'/>
</form>
</section>
<section ng-controller='"CountryStaticCtrl"'>
<ul>
<li countries&quot;="" in="" ng-repeat='"country'>
                Name: {{country.name}} - population {{country.population}}
            </li>
</ul>
</section>
<section ng-controller='"CountryCtrl"'>
        Search: <input ng-model='"query"' type='"text"/'/>
<br/>
<a ='name';="" href='""' ng-click='"orderField' orderreverse='!orderReverse"'>by Name</a>
<a ='population';="" href='""' ng-click='"orderField' orderreverse='!orderReverse"'>by Population</a>
<br/>
<ul>
<li countries="" filter:query="" in="" ng-repeat='"country' orderby:orderfield:orderreverse&quot;="" |="">
                Name: {{country.name}} - population {{country.population}}
            </li>
</ul>
</section>
</body>
</html>