angular_basicos/index.html at master · SonnyBoyWilliamsom/angular_basicos · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app>
    <head>
        <title>Angular Basics</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

    </head>
    <body
        ng-init="cities=[{city:'Bristol',country:'England'}, {city:'Madrid',country:'Spain'}, {city:'Buenos Aries',country:'Argentina'}, {city:'Paris',country:'France'}]">


    <input type="text" ng-model="name"> <!--   Asignación en la  memoria (name) de lo introducido como input-->
        <h1>Hello {{ name }}!</h1><!--En memoria name ya tiene un valor asignado, que se usará a conveniencia a lo largo del código-->

        <input type="text" ng-model="query"><!-- Aqui se asigna un valor a query que se usará más adelante como elemento de control del filtro usado con ng-repeat -->
        <ul>
            <li ng-repeat='city in cities | filter:query'> <!-- Con ng-repeat se puede usar un filtro para mostrar solo elementos parecido o coincidentes con el input almacenado en query -->
                {{city.city}} y {{city.country}}
            </li>

        </ul>


    </body>
</html>