2017-05-24 9 views
0

AngularJSフィルタから特定のJSONデータを呼び出そうとしています。基本的には、ユーザーがクエリ/検索バーのotpionsの1つをクリックし、別のdivに表示される関連JSONデータを取得します。 ng-clickとng-showを使用すると、表示するdivを取得できますが、表示するJSONデータを取得できません。Ng-clickとng-showはJSONデータを表示しません

は、ここに私のコードです:

var app = angular.module('myApp', []); 
 
    app.controller("MyCtrl", function($scope) { 
 
\t $scope.myvalue = false; 
 
\t $scope.showAlert = function(){ 
 
\t $scope.myvalue = true; 
 
\t }; 
 
\t $scope.schools = [ 
 
    { 
 
    "districtcleaned": "Test ISD", 
 
    "campus": "Test school", 
 
    "gradesimplified": "C", 
 
    "level": "Elementary", 
 
    } 
 
    ] 
 
}) 
 

 
<!-- begin snippet: js hide: false console: true babel: false --> 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->
<head> 
 
\t <!---AngularJS---> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
</head> 
 
<body ng-app="myApp"> 
 
    <div ng-controller="MyCtrl">    
 
\t \t \t <section class="form"> 
 
\t \t \t \t <form class="form-inline"> 
 
\t \t \t \t \t <input class="input-special" ng-model="query" type="text" placeholder="Search school rankings" autofocus> 
 
\t \t \t \t </form> 
 
\t \t \t \t <ul ng-show="query" class="ng-hide" ng-repeat="school in schools | filter:query | orderBy: 'name' | limitTo: 15"> 
 
\t \t \t \t \t <li ng-show="school" class="result"> 
 
\t \t \t \t \t \t <span class="category"><a ng-click="showAlert()">{{school.campus}}</a></span> 
 
\t \t \t \t \t \t <span class="category"><i class="fa fa-pencil" aria-hidden="true"></i> {{school.level}}</span> 
 
\t \t \t \t \t \t <span class="category">District: {{school.districtcleaned}}</span> 
 
\t \t \t \t \t \t <span class="category">Grade: {{school.gradesimplified}}</span> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t <div class="school-details ng-hide" ng-show="myvalue"> 
 
\t \t \t \t \t <p>School: {{school.campus}}</p> 
 
\t \t \t \t \t <p>District: {{school.districtcleaned}}</p> 
 
\t \t \t \t </div> 
 
\t \t \t </section> 
 
\t \t </div> 
 
</body>

私は任意およびすべてのヘルプはいただければ幸いですので、AngularJSとJSONに新たなんです。ありがとう!

+0

あなたはそれを変換する必要があります。試してみましょう:myJson = JSON.stringify(URJSON、null、2)を表示してから "myJson" – archae0pteryx

答えて

0

あなたはng-repeatブロックの外のバリアフリースクールにアクセスしています。学校は存在しない。そのdivをng-repeat ul要素の中に移動する必要があります。

次に、角ではJSON用の適切なフィルタがありますが、ここでは必要ありません。これはJSON形式を直接表示するためのものです。あなたはオブジェクトのプロパティにアクセスしているだけです。ここにところで、それへのリンク:

https://docs.angularjs.org/api/ng/filter/json

ここにあなたの正しい例。要素をクリックすると、詳細が正しく表示されています

var app = angular.module('myApp', []); 
 
app.controller("MyCtrl", function($scope) { 
 
\t $scope.myvalue = false; 
 
\t $scope.showAlert = function(){ 
 
\t $scope.myvalue = true; 
 
\t }; 
 
\t $scope.schools = [ 
 
    { 
 
    "districtcleaned": "Test ISD", 
 
    "campus": "Test school", 
 
    "gradesimplified": "C", 
 
    "level": "Elementary", 
 
    } 
 
    ] 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp"> 
 
    <div ng-controller="MyCtrl">    
 
\t \t \t <section class="form"> 
 
\t \t \t \t <form class="form-inline"> 
 
\t \t \t \t \t <input class="input-special" ng-model="query" type="text" placeholder="Search school rankings" autofocus> 
 
\t \t \t \t </form> 
 
\t \t \t \t <ul ng-show="query" class="ng-hide" ng-repeat="school in schools | filter: query | orderBy: 'name' | limitTo: 15"> 
 
\t \t \t \t \t <li ng-show="school" class="result"> 
 
\t \t \t \t \t \t <span class="category"><a ng-click="showAlert()">{{school.campus}}</a></span> 
 
\t \t \t \t \t \t <span class="category"><i class="fa fa-pencil" aria-hidden="true"></i> {{school.level}}</span> 
 
\t \t \t \t \t \t <span class="category">District: {{school.districtcleaned}}</span> 
 
\t \t \t \t \t \t <span class="category">Grade: {{school.gradesimplified}}</span> 
 
\t \t \t \t \t </li> 
 
      
 
      <div class="school-details ng-hide" ng-show="myvalue"> 
 
      <p>School: {{school.campus}}</p> 
 
      <p>District: {{school.districtcleaned}}</p> 
 
      </div> 
 
\t \t \t \t </ul> 
 
\t \t \t </section> 
 
\t \t </div> 
 
</body>

+0

を表示します。ありがとうございました! – riffram2014

関連する問題