Changes between Version 42 and Version 43 of 2014/angularjs/part2


Ignore:
Timestamp:
2014-03-12 20:43:03 (8 years ago)
Author:
japekall
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • 2014/angularjs/part2

    v42 v43  
    7373---- 
    7474 
    75 Lähdetään tarkastelemaan AngularJS-suodattimia koodiesimerkin avulla. Seuraavassa koodissa määritellään ensin html-tagi juurielementiksi, ng-init-direktiivin avulla määritellään names-niminen taulukko, jonne lisätään neljä nimeä. li -elementissä sitten tulostetaan names-taulukon sisältö ng-repeat-direktiivin avulla.  
     75Lähdetään tarkastelemaan AngularJS-suodattimia koodiesimerkin avulla. Seuraavassa esimerkissä määritellään ensin html-tagi juurielementiksi, body-tagissa ng-init-direktiivin avulla määritellään customers-niminen taulukko, jonne lisätään neljä henkilöä ja henkilöille paikkakunnat. Syötekenttään on mahdollista kirjoittaa haettava henkilön nimi. li -elementissä sitten tulostetaan names-taulukon sisältö ng-repeat-direktiivin avulla.  
    7676{{{ 
    7777<html ng-app> 
    78         <body ng-init="names=['Janne','Ari','Sari','Jouni']"> 
    79         <ul> 
    80                 <li ng-repeat="personName in names">{{personName}}</li> 
    81         </ul> 
    82         <script src="angular.min.js"></script> 
     78        <head>Directivess, Databingins Syntax</head> 
     79        <body data-ng-init="customers=[ 
     80        {name:'Jan Kallio',city:'Lohja'}, 
     81        {name:'Jori Suikkala',city:'Mertala'}, 
     82        {name:'Sanna Luomala',city:'Helsinki'} 
     83        ]"> 
     84        <br/> 
     85                <input type="text" data-ng-model="nameText" /> 
     86                <ul> 
     87                        <li ng-repeat="cust in customers | filter:nameText | orderBy:'city'"> 
     88                        {{cust.name | uppercase}}  - {{cust.city | lowercase}} 
     89                        </li> 
     90                </ul> 
     91                <script src="angular.min.js"></script> 
    8392        </body> 
    84 </html> 
    85 }}} 
     93</html>}}} 
    8694 
     95Mitä jos haluttaisiin suodattaa nimiä jotenkin, esimerkiksi voitaisiin  
     96