<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Angular proba</title>
        <script src="../libs/angular-1.2.29/angular.min.js"></script>
    </head>
    <body>
        <div class="wrapper">

            <h1>Zdravo Svete!</h1>
            <p>Ovo je Angular.js proba. </p>

            <div ng-app="" ng-controller="dodelaImena">

                <h3>Ukljucuje HTML</h3>
                <p>(mora preko localhosta)</p>

                <div ng-include="'partials/meni.html'"></div>


                <h3>Prikazuje unos</h3>

                <p>Unos: <input ng-model="unos" type="text"/> </p>
                <p>{{unos}}</p>


                <h3>Prikazuje varijable</h3>

                <p>Dakle, 2 + 2 je {{2 + 2}}</p>

                <p>Ovo je prosto kao {{prosto}}</p>
                <p>Moje ime je {{ime + ' ' + prezime}}</p>


                <h3>Racuna cenu</h3>

                <p>Cena: <input ng-model="cena" type="number"/> </p>
                <p>Kolicina: <input ng-model="kolicina" type="number"/> </p>

                <p>Iznos je {{cena * kolicina | currency}} </p>


                <h3>Lista JSON</h3>

                <ul>
                    <li ng-repeat="osoba in osobe">
                        {{ osoba.name + ', ' + osoba.country }}
                    </li>
                </ul>

                <table border="1">
                    <tr ng-repeat="osoba in osobe">
                        <td> {{osoba.name}} </td>
                        <td> {{osoba.country}} </td>
                    </tr>
                </table>

            </div> <!-- kraj aplikacije -->

        </div>

        <script>
            function dodelaImena($scope){
                $scope.prosto = "pasulj";
                $scope.ime = 'Daman';
                $scope.prezime = 'Daman';

                $scope.osobe = [
                    {name:'Jani',country:'Norway'},
                    {name:'Hege',country:'Sweden'},
                    {name:'Kai',country:'Denmark'}
                ];
            }
        </script>

    </body>
</html>
