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


Ignore:
Timestamp:
2014-03-12 20:51:23 (5 years ago)
Author:
japekall
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • 2014/angularjs/part2

    v43 v44  
    7373---- 
    7474 
    75 Lä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.  
     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 haettavan henkilön nimi. li -elementissä sitten tulostetaan names-taulukon sisältö ng-repeat-direktiivin avulla.  
    7676{{{ 
    7777<html ng-app> 
     
    8585                <input type="text" data-ng-model="nameText" /> 
    8686                <ul> 
    87                         <li ng-repeat="cust in customers | filter:nameText | orderBy:'city'"> 
    88                         {{cust.name | uppercase}}  - {{cust.city | lowercase}} 
     87                        <li ng-repeat="cust in customers"> 
     88                        {{cust.name}}  - {{cust.city}} 
    8989                        </li> 
    9090                </ul> 
     
    9393</html>}}} 
    9494 
    95 Mitä jos haluttaisiin suodattaa nimiä jotenkin, esimerkiksi voitaisiin  
     95Mitä jos nimiä haluttaisiin suodattaa jotenkin? Haluttaisiin vaikkapa tulostaa nimet isolla ja kaupungien nimet pienellä. AngularJS:ään sisäänrakennetun "putkituksen" avulla operaatiot onnistuvat hyvinkin helposti.  
    9696 
     97{{{ 
     98{{cust.name | uppercase}}  - {{cust.city | lowercase}} 
     99}}}