2016-07-28 6 views
1

私は現在AngularJS技術を研究しており、質問があります。AngularJSに関する基本的な質問

基本的に書籍の詳細(ISBN、Priceなど)を表示するHTML(この技術を学んでいるCodeProjectサイトからコピー)を作成しました。あなたは以下のスニペットを参照してください可能性があります

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

コントローラ名は本屋であり、以下に抜粋です:

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

QUESTION 1.どのような私が、特に混乱していますが$インデックスパラメータであり、 htmlでこれはAngularJSの組み込み属性ですか、どこにあるのインデックスを返しますか?私がこれを求めているのは、.jsファイルでこれが決して初期化されなかったからです。そのため、$ indexが選択された項目の位置であることをコンピュータがどのように理解しているのか混乱します。

ご不便をおかけして申し訳ございません。

+0

それがNGリピートの範囲で可変の角度露出させます。 (それぞれの反復には独自のスコープがあります)。バインドされた配列に現在のインデックスが含まれます。 ng-repeat docsを検索すると、そこに表示されます。 – ste2425

+0

ありがとうございます!それは明らかだ。 –

答えて

0

はい、$indexは、組み込みパラメータng-repeatです。 angularJSのng-repeatディレクティブは、反復処理中の配列のインデックスを自動的に認識します。

の値を知っているループをforEachのループと比較すると、配列全体を反復することができます。あなたがここにドキュメントを通過することができ、さらに明確にするため

https://docs.angularjs.org/api/ng/directive/ngRepeat

あなたはまた、それをよりよく理解するために、ここで、この素敵なブログの記事を通過することができます。 http://liamkaufman.com/blog/2013/05/13/understanding-angularjs-directives-part1-ng-repeat-and-compile/

+0

ありがとう!そのチュートリアルを見ていきます。 –

0

ng-repeatは、各項目の子スコープを作成します。それは、このようなものをスコープのプロパティの完全なリストについては、内部

$indexなどのプロパティを作成し、その子の範囲内

動的な角度のNGリピートディレクティブによって作成されたng-repeat docs

+0

ありがとうございます!それは明らかだ。 –

0

$インデックス変数の上部にある表を参照してください。これは、配列によっていくつかのデータを格納するために使用されるインデックスに似ています。ここで

より:https://docs.angularjs.org/api/ng/directive/ngRepeat

+0

ありがとう!そのチュートリアルを見ていきます。 –

関連する問題