AngularJS => Inbyggda direktiv

Vinkliga uttryck - Text kontra antal

Detta exempel visar hur vinkla uttryck utvärderas när du använder type="text" och type="number" för inmatningselementet. Tänk på följande controller och visa:

Kontrollant

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

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

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

Vid användning + i ett uttryck bundet till textinmatning kommer operatören sammanfoga strängarna (första exempel), som visar 55 på skärmen * .
Vid användning + i ett uttryck bunden till nummer ingång, operatören returnera summan av talen (andra exempel), som visar 10 på skärmen * .

* - Det är tills användaren ändrar värdet i inmatningsfältet, därefter kommer displayen att ändras i enlighet därmed.

Arbetsexempel

ngRepeat

ng-repeat är ett inbyggt direktiv i Angular som låter dig iterera en matris eller ett objekt och ger dig möjligheten att upprepa ett element en gång för varje objekt i samlingen.

ng-upprepa en matris

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

Var:
artikel = enskild artikel i samlingen
itemCollection = Matrisen du iterera

ng-upprepa ett objekt

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

Var:
nyckel = egendomsnamnet
värde = fastighetens värde
myObject = objektet du itererar

filtrera din ng-repetera efter användarinmatning

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

Var:
searchText = texten som användaren vill filtrera listan efter
stringArray = en rad strängar, t.ex. ['string', 'array']

Du kan också visa eller hänvisa till de filtrerade artiklarna någon annanstans genom att tilldela filterutdata ett alias med as aliasName , så:

<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-repetera-start och ng-repetera-slut

För att upprepa flera DOM-element genom att definiera en start och en slutpunkt kan du använda ng-repeat-start och ng-repeat-end riktlinjerna.

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

Produktion:

Det är viktigt att alltid stänga ng-repeat-start med ng-repeat-end .

variabler

ng-repeat exponerar också dessa variabler i uttrycket

Variabel	Typ	detaljer
`$index`	siffra	Lika med indexet för den aktuella iterationen ($ index === 0 kommer att utvärderas till true vid det första itererade elementet; se `$first` )
`$first`	Boolean	Utvärderar till sant vid det första itererade elementet
`$last`	Boolean	Utvärderar till sant vid det sista itererade elementet
`$middle`	Boolean	Utvärderar till true om elementet är mellan `$first` och `$last`
`$even`	Boolean	Utvärderar till true vid en jämn iteration (motsvarande `$index%2===0` )
`$odd`	Boolean	Utvärderar till true vid en udda numrerad iteration (motsvarande `$index%2===1` )

Resultathänsyn

Återgivning av ngRepeat kan bli långsam, särskilt när du använder stora samlingar.

Om objekten i samlingen har en identifierareegenskap, bör du alltid track by identifieraren i stället för hela objektet, som är standardfunktionen. Om ingen identifierare finns kan du alltid använda det inbyggda $index .

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

Räckvidd för ngRepeat

ngRepeat skapar alltid ett isolerat barnomfång så att man måste ta hand om föräldrarnas omfång måste nås inom repetitionen.

Här är ett enkelt exempel som visar hur du kan ställa in ett värde i din överordnade omfattning från en klickhändelse inuti 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'
}];

Om det bara fanns val = item.value vid ng-click kommer det inte att uppdatera val i överordnade omfång på grund av det isolerade omfånget. Det är därför man får tillgång till överordnade räckvidd med $parent eller med controllerAs syntax (t.ex. ng-controller="mainController as ctrl" ).

Häckt ng-repetition

Du kan också använda kapslade ng-repetera.

<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']
  ];
});

Här för att få tillgång till indexet för förälder ng-repetition inuti barn ng-repetition kan du använda $parent.$index .

ngShow och ngHide

Direktivet ng-show visar eller döljer HTML-elementet baserat på om uttrycket som skickas till det är sant eller falskt. Om värdet på uttrycket är falskt kommer det att dölja. Om det är sant kommer det att visa.

Direktivet om ng-hide är liknande. Men om värdet är falskt visar HTML-elementet. När uttrycket är sanningsenligt kommer det att dölja det.

Working JSBin Exempel

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';
  
}

<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 är ett direktiv som förenklar skapandet av en html-dropdown-ruta för val av ett objekt från en matris som kommer att lagras i en modell. NgOptions-attributet används för att dynamiskt generera en lista med <option> -element för <select> -elementet med hjälp av arrayen eller objektet som erhålls genom att utvärdera uttrycket ngOptions-förståelse.

Med ng-options kan markeringen reduceras till bara en markering och direktivet skapar samma val:

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

Det finns ett annat sätt att skapa select alternativ med hjälp av ng-repeat , men det rekommenderas inte att använda ng-repeat eftersom det mest används för allmänna ändamål, till exempel forEach bara slinga. Medan ng-options är specifikt för att skapa select taggalternativ.

Ovanstående exempel med ng-repeat skulle vara

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

FULL EXEMPEL

Låt oss se ovanstående exempel i detalj också med vissa variationer i det.

Datamodell för exemplet:

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