Changes between Version 43 and Version 44 of 2014/angularjs/part2
- Timestamp:
- 2014-03-12 20:51:23 (8 years ago)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
2014/angularjs/part2
v43 v44 73 73 ---- 74 74 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.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 haettavan henkilön nimi. li -elementissä sitten tulostetaan names-taulukon sisältö ng-repeat-direktiivin avulla. 76 76 {{{ 77 77 <html ng-app> … … 85 85 <input type="text" data-ng-model="nameText" /> 86 86 <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}} 89 89 </li> 90 90 </ul> … … 93 93 </html>}}} 94 94 95 Mitä jos haluttaisiin suodattaa nimiä jotenkin, esimerkiksi voitaisiin95 Mitä jos nimiä haluttaisiin suodattaa jotenkin? Haluttaisiin vaikkapa tulostaa nimet isolla ja kaupungien nimet pienellä. AngularJS:ään sisäänrakennetun "putkituksen" avulla operaatiot onnistuvat hyvinkin helposti. 96 96 97 {{{ 98 {{cust.name | uppercase}} - {{cust.city | lowercase}} 99 }}}
