AngularJS => Ingebouwde richtlijnen

Hoekige uitdrukkingen - Tekst versus nummer

Dit voorbeeld laat zien hoe hoekuitdrukkingen worden geëvalueerd bij gebruik van type="text" en type="number" voor het invoerelement. Overweeg de volgende controller en bekijk:

controleur

 var app = angular.module('app', []);

 app.controller('ctrl', function($scope) {
     $scope.textInput = {
         value: '5'
     };     
     $scope.numberInput = {
         value: 5
     };
 });

Visie

<div ng-app="app" ng-controller="ctrl">
    <input type="text" ng-model="textInput.value">
    {{ textInput.value + 5 }}
    <input type="number" ng-model="numberInput.value">
    {{ numberInput.value + 5 }}
</div>

Wanneer u + in een uitdrukking die aan tekstinvoer is gebonden, zal de operator de tekenreeksen samenvoegen (eerste voorbeeld), waarbij 55 op het scherm wordt weergegeven * .
Wanneer u + in een uitdrukking die aan nummerinvoer is gebonden, retourneert de operator de som van de getallen (tweede voorbeeld), waarbij 10 op het scherm wordt weergegeven * .

* - Dat is totdat de gebruiker de waarde in het invoerveld wijzigt, daarna zal het display dienovereenkomstig veranderen.

Werkend voorbeeld

ngRepeat

ng-repeat is een ingebouwde richtlijn in Angular waarmee je een array of een object kunt herhalen en waarmee je een element voor elk item in de collectie een keer kunt herhalen.

Herhaal een array

<ul>
    <li ng-repeat="item in itemCollection">
       {{item.Name}}
    </li>
</ul>

Waar:
item = individueel item in de collectie
itemCollection = De array die u doorloopt

ng-herhaal een object

<ul>
    <li ng-repeat="(key, value) in myObject">
       {{key}} : {{value}}
    </li>
</ul>

Waar:
key = de eigenschapsnaam
waarde = de waarde van het onroerend goed
myObject = het object dat u herhaalt

filter uw ng-repeat op gebruikersinvoer

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText">
       {{string}}
    </li>
</ul>

Waar:
searchText = de tekst waarop de gebruiker de lijst wil filteren
stringArray = een array van strings, bijvoorbeeld ['string', 'array']

U kunt de gefilterde items ook elders weergeven of as aliasName door de filteruitvoer een alias toe te wijzen as aliasName , zoals hier:

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText as filteredStrings">
       {{string}}
    </li>
</ul>
<p>There are {{filteredStrings.length}} matching results</p>

ng-repeat-start en ng-repeat-end

Om meerdere DOM-elementen te herhalen door een begin- en eindpunt te definiëren, kunt u de richtlijnen ng-repeat-start en ng-repeat-end .

<ul>
    <li ng-repeat-start="item in [{a: 1, b: 2}, {a: 3, b:4}]">
        {{item.a}}
    </li>
    <li ng-repeat-end>
        {{item.b}}
    </li>
</ul>

Output:

Het is belangrijk om ng-repeat-start altijd te sluiten met ng-repeat-end .

Variabelen

ng-repeat deze variabelen ook in de uitdrukking weergegeven

veranderlijk	Type	Details
`$index`	Aantal	Is gelijk aan de index van de huidige iteratie ($ index === 0 wordt geëvalueerd naar true bij het eerste iteratie-element; zie `$first` )
`$first`	Boolean	Evalueert naar waar bij het eerste iteratie-element
`$last`	Boolean	Evalueert naar waar bij het laatst herhaalde element
`$middle`	Boolean	Evalueert naar waar als het element tussen `$first` en `$last`
`$even`	Boolean	Evalueert naar true bij een even genummerde iteratie (gelijk aan `$index%2===0` )
`$odd`	Boolean	Evalueert naar waar bij een oneven genummerde iteratie (gelijk aan `$index%2===1` )

Prestatieoverwegingen

Rendering ngRepeat kan langzaam worden, vooral bij het gebruik van grote collecties.

Als de objecten in de collectie hebben een identificatie eigenschap, moet u altijd track by de identifier in plaats van het hele object, dat is de standaard functionaliteit. Als er geen ID aanwezig is, kunt u altijd de ingebouwde $index .

<div ng-repeat="item in itemCollection track by item.id">
<div ng-repeat="item in itemCollection track by $index">

Reikwijdte van ng Herhaling

ngRepeat maakt altijd een geïsoleerd ngRepeat , dus wees voorzichtig als het ngRepeat binnen de herhaling moet worden gebruikt.

Hier is een eenvoudig voorbeeld dat laat zien hoe u een waarde in uw bovenliggende scope kunt instellen via een ngRepeat binnen ngRepeat .

scope val:  {{val}}<br/>
ctrlAs val: {{ctrl.val}}
<ul>
    <li ng-repeat="item in itemCollection">
        <a href="#" ng-click="$parent.val=item.value; ctrl.val=item.value;">
            {{item.label}} {{item.value}}
        </a>
    </li>
</ul>

$scope.val = 0;
this.val = 0;

$scope.itemCollection = [{
    id: 0,
    value: 4.99,
    label: 'Football'
},
{
    id: 1,
    value: 6.99,
    label: 'Baseball'
},
{
    id: 2,
    value: 9.99,
    label: 'Basketball'
}];

Als er alleen val = item.value bij ng-click , wordt de val in het bovenliggende bereik niet bijgewerkt vanwege het geïsoleerde bereik. Dat is waarom de bovenliggende scope toegankelijk is met $parent referentie of met de syntaxis van de controllerAs (bijv. ng-controller="mainController as ctrl" ).

Geneste ng-herhaling

U kunt ook geneste ng-herhaling gebruiken.

<div ng-repeat="values in test">
    <div ng-repeat="i in values">
      [{{$parent.$index}},{{$index}}] {{i}}
    </div>
</div>

var app = angular.module("myApp", []);
app.controller("ctrl", function($scope) {
  $scope.test = [
    ['a', 'b', 'c'],
    ['d', 'e', 'f']
  ];
});

Om toegang te krijgen tot de index van bovenliggende ng-repeat in onderliggende ng-repeat, kunt u $parent.$index .

ngToon en ngVerbergen

De ng-show instructie toont of verbergt het HTML-element op basis van of de expressie die eraan is doorgegeven waar of onwaar is. Als de waarde van de uitdrukking vals is, wordt deze verborgen. Als het waar is, zal het blijken.

De richtlijn ng-hide is vergelijkbaar. Als de waarde echter vals is, wordt het HTML-element weergegeven. Wanneer de uitdrukking waarheidsgetrouw is, zal deze deze verbergen.

Werkend JSBin-voorbeeld

Controller :

var app = angular.module('app', []);
  
angular.module('app')
  .controller('ExampleController', ExampleController);
 
function ExampleController() {
  
  var vm = this;
  
  //Binding the username to HTML element
  vm.username = '';
  
  //A taken username
  vm.taken_username = 'StackOverflow';
  
}

Visie

<section ng-controller="ExampleController as main">
    
    <p>Enter Password</p>
    <input ng-model="main.username" type="text">
    
    <hr>
    
    <!-- Will always show as long as StackOverflow is not typed in -->
    <!-- The expression is always true when it is not StackOverflow -->
    <div style="color:green;" ng-show="main.username != main.taken_username">
      Your username is free to use!
    </div>
    
    <!-- Will only show when StackOverflow is typed in -->
    <!-- The expression value becomes falsy -->
    <div style="color:red;" ng-hide="main.username != main.taken_username">
      Your username is taken!
    </div>
    
    <p>Enter 'StackOverflow' in username field to show ngHide directive.</p>
    
 </section>

ngOptions

ngOptions is een richtlijn die het maken van een html-vervolgkeuzelijst vereenvoudigt voor de selectie van een item uit een array die in een model wordt opgeslagen. Het attribuut ngOptions wordt gebruikt om dynamisch een lijst met <option> -elementen voor het element <select> te genereren met behulp van de array of het object dat is verkregen door de ngOptions-begripsexpressie te evalueren.

Met ng-options de markup worden gereduceerd tot slechts een select-tag en de richtlijn maakt dezelfde select:

<select ng-model="selectedFruitNgOptions" 
        ng-options="curFruit as curFruit.label for curFruit in fruit">
</select>

Er is een andere manier om select opties te maken met ng-repeat , maar het wordt afgeraden om ng-repeat omdat het meestal wordt gebruikt voor algemene doeleinden, zoals de forEach to-loop. Terwijl ng-options specifiek is voor het maken van select tag-opties.

Bovenstaand voorbeeld zou het gebruik van ng-repeat zijn

<select ng-model="selectedFruit">
    <option ng-repeat="curFruit in fruit" value="{{curFruit}}">
        {{curFruit.label}}
    </option>
</select>

VOLLEDIG VOORBEELD

Laten we het bovenstaande voorbeeld in detail bekijken, ook met enkele variaties erin.

Gegevensmodel voor het voorbeeld:

$scope.fruit = [
    { label: "Apples", value: 4, id: 2 },
    { label: "Oranges", value: 2, id: 1 },
    { label: "Limes", value: 4, id: 4 },
    { label: "Lemons", value: 5, id: 3 }
];

<!-- label for value in array -->
<select ng-options="f.label for f in fruit" ng-model="selectedFruit"></select>