2017-07-07 10 views
0

私はAngularJSを初めて使用しています。私は絶対初心者です。フィルタを使ってみました。オブジェクトを直接バインドするのではなく、プロパティにバインドしようとしました。しかしコードは、リストを表示する代わりに{{x.people}}を出力として表示します。私はここで何が欠けているのですか?AngularJS:オブジェクトのプロパティをスコープにバインドする方法

<!DOCTYPE html> 
<html> 

<head> 
    <title>ANGULAR APP</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> 
    </script> 
</head> 

<body ng-app="myApp" ng-controller="myFirstController"> 
    <p>Type a letter in the input field:</p> 
    <p><input type="text" ng-model="test"></p> 
    <ul> 
     <li ng-repeat="x in model.people"> 
      {{ x.name }} 
     </li> 
    </ul> 
</body> 

<script> 
var app = angular.module('myApp', []); 
var myFirstController = function($scope) { 
    $scope.model = { 
     people: [{ 
       name: 'Jani', 
       country: 'Norway' 
      }, 
      { 
       name: 'Carl', 
       country: 'Sweden' 
      }, 
      { 
       name: 'Margareth', 
       country: 'England' 
      }, 
      { 
       name: 'Hege', 
       country: 'Norway' 
      }, 
      { 
       name: 'Joe', 
       country: 'Denmark' 
      }, 
      { 
       name: 'Gustav', 
       country: 'Sweden' 
      }, 
      { 
       name: 'Birgit', 
       country: 'Denmark' 
      }, 
      { 
       name: 'Mary', 
       country: 'England' 
      }, 
      { 
       name: 'Kai', 
       country: 'Norway' 
      } 
     ]; 
    }; 
} 

app.controller('myFirstController', myFirstController); 
</script> 
</html> 
+0

のようなコントローラーを宣言しようこれは:app.controller( "myFirstController"、function($ scope){あなたのコード}) –

+0

予期しないトークンが40行目にありますか?私はそれを取り除かなければならない。 ? –

答えて

1

不要;は、あなたのJSONデータの末尾にあります:

$scope.model = { 
    people:[ 
    ...         // your data 
    {name:'Kai',country:'Norway'}];  // <------ here the ; is illegal 
    };   
} 

は、以下の固定の例参照してください。

var app = angular.module('myApp', []); 
 
var myFirstController = function($scope) { 
 
    $scope.model = { 
 
    people: [{ 
 
     name: 'Jani', 
 
     country: 'Norway' 
 
     }, 
 
     { 
 
     name: 'Carl', 
 
     country: 'Sweden' 
 
     }, 
 
     { 
 
     name: 'Margareth', 
 
     country: 'England' 
 
     }, 
 
     { 
 
     name: 'Hege', 
 
     country: 'Norway' 
 
     }, 
 
     { 
 
     name: 'Joe', 
 
     country: 'Denmark' 
 
     }, 
 
     { 
 
     name: 'Gustav', 
 
     country: 'Sweden' 
 
     }, 
 
     { 
 
     name: 'Birgit', 
 
     country: 'Denmark' 
 
     }, 
 
     { 
 
     name: 'Mary', 
 
     country: 'England' 
 
     }, 
 
     { 
 
     name: 'Kai', 
 
     country: 'Norway' 
 
     } 
 
    ] 
 
    }; 
 
} 
 

 
app.controller('myFirstController', myFirstController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myFirstController"> 
 
    <p><input type="text" ng-model="test"></p> 
 
    <ul> 
 
    <li ng-repeat="x in model.people | filter: {name: test}"> 
 
     {{ x.name }} 
 
    </li> 
 
    </ul> 
 
</div>

+0

実際にはそうです。 {名前: 'カイ'、国: 'ノルウェー'}]の末尾に。それは違法です。 – JasperZelf

+1

@ JasperZelfそれを指摘してくれてありがとう。私はちょうど間違った場所に印をつけた。 :P – Pengyy

関連する問題