2017-10-29 5 views
0

私は角度jを初めて使用しています。今は練習中のフィルタです。私は、オブジェクトの配列を反復処理する完全にできていますが、私は、オブジェクトのオブジェクトを使用していたときに私のブラウザでエラーが発生します: 「キャッチされないでSyntaxError:予期しないトークン」角度jsでオブジェクトリテラルに対してng-repeatを使用したときのエラー

<!DOCTYPE> 
<html> 
    <head> 
    </head> 
    <body> 
     <div ng-app="myApp"> 
      <div ng-controller="myCont"> 

       <div ng-repeat="b in ar2"> 
        {{b}} 
       </div> 

       {{a}} 
       </br></br> 
       {{c | myFilt}} 
       </br> 
       </br> 
       <div ng-repeat="(key,value) in d"> 
        {{key.a|myFilt}} 
       </div> 
      </div> 
     </div> 
     <script src="jquery-3.0.0.js"></script> 
     <script src="angular.js"></script> 
     <script src="angular_try.js"></script> 

    </body> 
</html> 

そして、ここでは角JSです:

var myApp = angular.module("myApp",[]) 

myApp.controller("myCont",["$scope","$filter",function($scope,$filter){ 
$scope.a ="pro"; 
$scope.arr = ["abc","bcd","cdb"]; 
$scope.arr3 = [100,200,300]; 
$scope.ar2=[]; 
$scope.c = 10; 
$scope.d = {{a:"mishtu",b:500,c:"mondal"},{a:"tulu",b:400,c:"mondal"}, 
{a:"titlu",b:600,"c":"mondal"}} 
}]) 
+0

'$ scope.d = [{ "mishtu"、B:500、 c: "mondal"}、{a: "tulu"、b:400、c: "mondal"}、 {a: "titlu"、b:600、 "c": "mondal"}]; ' –

+0

' {{value.a | myFilt}} ' –

+0

@Punit JSFiddle example [ここ](https://jsfiddle.net/Lr8jtt) 0z /) –

答えて

0

オブジェクト(キー、値)ペアで常に値が含まれていますが、あなたのオブジェクト

$scope.d = {{a:"mishtu",b:500,c:"mondal"},{a:"tulu",b:400,c:"mondal"}, 
{a:"titlu",b:600,"c":"mondal"}} 

は、オブジェクトのリストを保持しているので、あなたのようにそれを宣言している必要があります配列。

$scope.d = [{a:"mishtu",b:500,c:"mondal"},{a:"tulu",b:400,c:"mondal"}, 
{a:"titlu",b:600,"c":"mondal"}] 

このよう

これを使用する方法である:

var app = angular.module('myApp', []); 
 
app.controller('MyController', ['$scope', function($scope) { 
 
    $scope.title = 'Hello world'; 
 

 
    $scope.d = [{ 
 
    a: "mishtu", 
 
    b: 500, 
 
    c: "mondal" 
 
    }, { 
 
    a: "tulu", 
 
    b: 400, 
 
    c: "mondal" 
 
    }, { 
 
    a: "titlu", 
 
    b: 600, 
 
    "c": "mondal" 
 
    }]; 
 

 
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-controller='MyController' ng-app="myApp"> 
 
    <div>{{title}}</div> 
 

 
    <table border="1" ng-repeat="myObj in d"> 
 
    <tr ng-repeat="(x, y) in myObj"> 
 
     <td>{{x}}</td> 
 
     <td>{{y}}</td> 
 
    </tr> 
 
    </table> 
 
</div>

関連する問題