szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angularjs|< AngularJS]]

====== Példatár ======
===== Cache törlése =====

<code javascript>
app.controller( 'appCtrl', function($scope, $templateCache) {
    $scope.cacheTorles = function() {
        $templateCache.removeAll();
    }
});
</code>

<code html>
<button ng-click='cacheTorles()'>Cache törlés</button>
</code>

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.
<code>
<input type="number" ng-pattern="/^[0-9]{1,10}$/">
</code>

A \d használata, valós számokhoz:
<code>
<input type="number" ng-pattern="/^\d{0,9}(\.\d{1,9})?$/">
</code>

===== Többdimenziós tömb a hatókörben =====

Tömb létrehozása
<code>
$scope.tomb = [];
</code>

Egy elem hozzáadása a webes felületről:
<code>
$scope.tomb.push({
    nev: $scope.nev,
    kor: $scope.kor,
    fizetes: $scope.fizetes
});
</code>

===== Szűrés =====

<code>
<tr ng-repeat="elem in tomb | orderBy:'nev'">
</code>

===== Stílus beállítása =====

<code html index.html>
...
<div ng-style="egy">tartalom</div>
...
</code>

<code javascript script.js>
...
$scope.egy = {'background-color': 'navy'};
...
</code>

===== HTML elemek beszúrása =====

Az ngSanitize modulra van szükség lehetőséghez. 

<code>
<div ng-bind-html="tartalom"></div>
</code>


===== 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 =====

<code>
$scope.nevek = ["Jóska", "Pista", "Mari", "Kati"];
$scope.fizetesek = [850000, 975000, 922000, 840000];
</code>

<code>
<tr ng-repeat="nev in nevek">
    <td>{{nev}}</td>
    <td>{{fizetesek[$index]}}</td>
</tr>
</code>

===== Tömbök összefűzése ngRepeatben =====

<code>
<div ng-repeat="nev in ['Jóska', 'Pista'].concat(['Kati', 'Mari'])">
    {{nev}}
</div>
</code>


===== ngList =====

Egy többsoros beviteli mezőt minden sorából
szeretnénk listát készíteni. 

<code>

<textarea ng-model="lista" ng-list="&#10;" ng-trim="false"></textarea>

<pre>{{ lista | json }}</pre>

</code>