2016-06-30 7 views
1

ng-repeatはテーブルでは動作しません。出力のみヘッダー部分が表示されますか? 私はバインディングが完全にうまくいったと思いますが、何かが欠けていますか? 誰かが私が間違っているところで私を助けることができますか?なぜng-repeatが機能しないのですか?

JAVAスクリプト:

var myapp=angular.module("MyApp",[]); 
 
var controller=function($scope) 
 
{ 
 
     var technology1=[ 
 
      {Name: "C#",Likes: 0,Dislikes: 0}, 
 
      {Name: "JAVA",Likes:0,Dislikes:0}, 
 
      {Name: "Python",Likes:0,Dislikes:0} 
 
     ]; 
 
     $scope.technology=technology1; 
 
     $scope.incrementLikes=finction(technology) 
 
     { 
 
      technology.Likes++; 
 
     } 
 
     $scope.discrementLikes=function(technology) 
 
     { 
 
     technology.Dislikes++; 
 
     } 
 
} 
 
myapp.controller('MyController',controller);
<html ng-app="MyApp"> 
 
    <head> 
 
     <title></title> 
 
     <script src="angular.js"></script> 
 
     <script src="Day2.js"></script> 
 

 
    </head> 
 
    <Body ng-controller="MyController"> 
 
    <div > 
 
     <table border='2'> 
 
     <thead> 
 
      <tr> 
 
      <th>Name Of Technology</th> 
 
      <th>Likes</th> 
 
      <th>Dislikes</th> 
 
      <th>Likes/Dislikes</th> 
 
      </tr> 
 
     </thead> 
 

 
     <tbody> 
 
     <tr ng-repeat="tech in technology"> 
 
      <td>{{tech.Name}}</td> 
 
      <td>{{tech.Likes}}</td> 
 
      <td>{{tech.Dislikes}}</td> 
 
      <td> 
 
      <input type="button" value="Like" ng-click="incrementLikes(tech)"> 
 
      <input type="button" value="Dislikes" ng-click="decrementLikes(tech)"> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </Body> 
 
    </html>

+2

タイプミス 'finction'は' function'する必要がありますあります –

答えて

0

あなたのコードは、あなたのmyControllerコントローラのタイプミスがあり

 $scope.incrementLikes=function(technology) 
0

によって

 $scope.incrementLikes=finction(technology) 

この行を置き換えます。 finctionfunctionに変更してください。

0

Pankaj Parkar氏は、 "finction"のタイプミスを修正し、値を増やしているときに$ scope.technology.Likesと$ scope.technology.dislikesを参照する必要があると指摘しました。

は、したがって、これらの行を更新します。

$scope.incrementLikes=finction(technology) 
    { 
     technology.Likes++; 
    } 
$scope.discrementLikes=function(technology) 
    { 
    technology.Dislikes++; 
    } 

この

$scope.incrementLikes=function(technology) 
    { 
     $scope.technology.Likes++; 
    } 
$scope.discrementLikes=function(technology) 
    { 
     $scope.technology.Dislikes++; 
    } 
0

ためにここに完全に修正されたコードです。私は@pzelenovicからの答えにコメントすることはできませんが、 "$ scope.technology.Likes ++;"を追加しないでくださいまたは "$ scope.technology.Likes ++;"あなたのインクリメント/デクリメント機能に。 Click機能から渡した "tech"オブジェクトのlikes/dislikesプロパティを更新しているので、それらは正しいものです。

var myapp=angular.module("MyApp",[]); 
 
var controller=function($scope) 
 
{ 
 
     var technology1=[ 
 
      {Name: "C#",Likes: 0,Dislikes: 0}, 
 
      {Name: "JAVA",Likes:0,Dislikes:0}, 
 
      {Name: "Python",Likes:0,Dislikes:0} 
 
     ]; 
 
     $scope.technology=technology1; 
 
     $scope.incrementLikes=function(technology) 
 
     { 
 
      technology.Likes++; 
 
     } 
 
     $scope.decrementLikes=function(technology) 
 
     { 
 
     technology.Dislikes++; 
 
     } 
 
} 
 
myapp.controller('MyController',controller);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app="MyApp"> 
 
    <head> 
 
     <title></title> 
 
     <script src="angular.js"></script> 
 
     <script src="Day2.js"></script> 
 

 
    </head> 
 
    <Body ng-controller="MyController"> 
 
    <div > 
 
     <table border='2'> 
 
     <thead> 
 
      <tr> 
 
      <th>Name Of Technology</th> 
 
      <th>Likes</th> 
 
      <th>Dislikes</th> 
 
      <th>Likes/Dislikes</th> 
 
      </tr> 
 
     </thead> 
 

 
     <tbody> 
 
     <tr ng-repeat="tech in technology"> 
 
      <td>{{tech.Name}}</td> 
 
      <td>{{tech.Likes}}</td> 
 
      <td>{{tech.Dislikes}}</td> 
 
      <td> 
 
      <input type="button" value="Like" ng-click="incrementLikes(tech)"> 
 
      <input type="button" value="Dislikes" ng-click="decrementLikes(tech)"> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </Body> 
 
    </html>

関連する問題