oktatas:web:angularjs:angularjs_peldatar
Tartalomjegyzék
Példatár
Cache törlése
app.controller( 'appCtrl', function($scope, $templateCache) { $scope.cacheTorles = function() { $templateCache.removeAll(); } });
<button ng-click='cacheTorles()'>Cache törlés</button>
Megjegyzem a cacheben való tárolásról lebeszélhető a böngésző:
- Chrome
- F12 → F1 (vagy Customize and control DevTools)
- Disable cache (while DevTools is open)
- Firefox
- F12 → Speciális beállítások → Gyorsítótár ki (ha az eszközkészlet nyitva van)
Az input elem validálása regexel
Például csak számokat szeretnénk elfogadni.
<input type="number" ng-pattern="/^[0-9]{1,10}$/">
A \d használata, valós számokhoz:
<input type="number" ng-pattern="/^\d{0,9}(\.\d{1,9})?$/">
Többdimenziós tömb a hatókörben
Tömb létrehozása
$scope.tomb = [];
Egy elem hozzáadása a webes felületről:
$scope.tomb.push({ nev: $scope.nev, kor: $scope.kor, fizetes: $scope.fizetes });
Szűrés
<tr ng-repeat="elem in tomb | orderBy:'nev'">
Stílus beállítása
- index.html
... <div ng-style="egy">tartalom</div> ...
- script.js
... $scope.egy = {'background-color': 'navy'}; ...
HTML elemek beszúrása
Az ngSanitize modulra van szükség lehetőséghez.
<div ng-bind-html="tartalom"></div>
ngRepeat dupla kulcs hiba
Error: ngRepeat:dupes Duplicate Key in Repeater
Ilyen esetben jelentkezhet:
<div ng-repeat="ertek in [5, 5]"></div>
A tömb két ötöst tartalmaz.
A megoldás:
<div ng-repeat="ertek in [5, 5] track by $index"></div>
Kulcsnak megadom a tömb indexét.
Több tömb ngRepeat-ben
$scope.nevek = ["Jóska", "Pista", "Mari", "Kati"]; $scope.fizetesek = [850000, 975000, 922000, 840000];
<tr ng-repeat="nev in nevek"> <td>{{nev}}</td> <td>{{fizetesek[$index]}}</td> </tr>
Tömbök összefűzése ngRepeatben
<div ng-repeat="nev in ['Jóska', 'Pista'].concat(['Kati', 'Mari'])"> {{nev}} </div>
ngList
Egy többsoros beviteli mezőt minden sorából szeretnénk listát készíteni.
<textarea ng-model="lista" ng-list=" " ng-trim="false"></textarea> <pre>{{ lista | json }}</pre>
oktatas/web/angularjs/angularjs_peldatar.txt · Utolsó módosítás: 2019/08/22 20:29 szerkesztette: admin