2016-07-28 14 views
1

Ich studiere gerade die AngularJS Technologie und ich habe eine Frage.Grundlegende Fragen für AngularJS

Ich habe einen HTML-Code erstellt (kopiert von der CodeProject-Seite, wo ich diese Technologie studiere), die im Grunde Details eines Buches anzeigt (ISBN, Preis, etc.). Sie können weiter unten auf die Schnipsel verweisen:

<tr ng-repeat="item in items"> 
          <td>{{item.ISBN}}</td> 
          <td> 
           <span ng-hide="editMode">{{item.Name}}</span> 
           <input type="text" ng-show="editMode" ng-model="item.Name" /> 
          </td> 
          <td> 
           <span ng-hide="editMode">{{item.Price}}</span> 
           <input type="number" ng-show="editMode" ng-model="item.Price" /> 
          </td> 
          <td> 
           <span ng-hide="editMode">{{item.Quantity}}</span> 
           <input type="number" ng-show="editMode" ng-model="item.Quantity" /> 
          </td> 
          <td>{{(item.Quantity) * (item.Price)}}</td> 
          <td> 
           <span><button type="submit" ng-hide="editMode" ng-click="editMode = true;editItem(item)">Edit</button></span> 
           <span><button type="submit" ng-show="editMode" ng-click="editMode = false">Save</button></span> 
           <span><input type="button" value="Delete" ng-click="removeItem($index)"/></span> 
          </td> 
         </tr> 

Der Controller Name Buchhandlung ist und unten ist das Snippet:

app.controller("Bookstore", function($scope) 
{ 
    $scope.items = [ 
     { ISBN: "5674789", Name: "ASP.NET MVC", Price: 560, Quantity: 20 }, 
     { ISBN: "4352134", Name: "AngularJS", Price: 450, Quantity: 25 }, 
     { ISBN: "2460932", Name: "Javascript", Price: 180, Quantity: 15 } 
    ]; 
} 

$scope.removeItem = function (index) { 
     $scope.items.splice(index, 1); 
    } 

FRAGE 1. Was ich besonders verwirrt über die $ index Parameter in der html. Ist dies ein eingebautes Attribut von AngularJS, das den Index des Worts zurückgibt, in dem es sich befindet? Der Grund, warum ich das frage, liegt daran, dass dies nie in der JS-Datei initialisiert wurde, so dass ich verwirrt bin, wie der Computer versteht, dass $ index die Position des ausgewählten Elements ist.

Es tut mir leid, wenn meine Frage ein wenig verwirrend erscheint.

+0

Es ist eine variable Winkel setzt auf den Anwendungsbereich der Ng wiederholen. (Jede Iteration hat ihren eigenen Bereich). Es enthält den aktuellen Index im gebundenen Array. Wenn Sie nach oben schauen, wird es wieder da sein. – ste2425

+0

Danke! Es ist klar. –

Antwort

0

Ja, $index ist der integrierte Parameter ng-repeat. Die ng-repeat-Direktive von angularJS kennt automatisch den Index des Arrays, das iteriert.

Sie können es besser verstehen, indem Sie es mit einer forEach Schleife vergleichen, die den Wert index kennt, während es über das Array iteriert.

Zur weiteren Verdeutlichung Sie hier durch die Dokumentation gehen: https://docs.angularjs.org/api/ng/directive/ngRepeat

Sie auch hier durch diesen schönen Blog-Post gehen kann es besser zu verstehen: http://liamkaufman.com/blog/2013/05/13/understanding-angularjs-directives-part1-ng-repeat-and-compile/

+0

Vielen Dank! Ich werde mir das Tutorial ansehen. –

0

ng-repeat schafft ein Kind Umfang für jedes Element .

Innerhalb dieses Kind Umfang schafft es Eigenschaften wie $index intern

Für vollständige Liste dieser Anwendungsbereich Eigenschaften Tabelle von ng-repeat docs

+0

10 Danke! Es ist klar. –

0

$ index Variable oben sehen wird dynamisch durch Winkel der ng-Repeat-Richtlinie erstellt . Es ähnelt dem Index, der von einem Array zum Speichern von Daten verwendet wird.

Mehr zu es hier: https://docs.angularjs.org/api/ng/directive/ngRepeat

+0

Danke! Ich werde mir das Tutorial ansehen. –

Verwandte Themen