Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:angularjs:angularjs_peldatar

< AngularJS

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="&#10;" 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