Ng-click und ng-show zeigen keine JSON-Daten an

Ich versuche, spezifische JSON-Daten von einem AngularJS-Filter aufzurufen. Grundsätzlich möchte ich, dass ein Benutzer auf eine der otpions in der Abfrage-/Suchleiste klickt und zugehörige JSON-Daten in einem anderen div anzeigt. Mit ng-click und ng-show kann ich das div anzeigen, aber ich kann die JSON-Daten nicht anzeigen.Ng-click und ng-show zeigen keine JSON-Daten an

Hier ist mein Code:

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>

Ich bin neu in AngularJS und JSON so dass jeder und alle Hilfe geschätzt. Vielen Dank!

Quelle

2017-05-24 riffram2014

Sie müssen es konvertieren. Versuchen Sie: Lassen Sie myJson = JSON.stringify (URJSON, null, 2) und dann "myJson" anzeigen – archae0pteryx

Sie greifen außerhalb des ng-repeat-Blocks auf die Variable school zu. Es gibt keine Schule. Sie sollten dieses div in das Element ng-repeat ul verschieben.

Dann in eckigen Sie haben einen richtigen Filter für JSON, aber hier brauchen Sie es nicht. Das ist für das Display JSON-Format direkt. Sie greifen nur auf Eigenschaften von Objekten zu. Durch die Art und Weise hier der Link dazu:

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

Hier Ihr korrektes Beispiel. Ein Klick auf das ein Element sind die Daten korrekt dargestellt:

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>

Quelle

2017-05-24 22:42:09 quirimmo

Das hat funktioniert. Vielen Dank! – riffram2014

Ng-click und ng-show zeigen keine JSON-Daten an

Antwort

Verwandte Themen