Question

我正在尝试从AngularJS过滤器调用特定的JSON数据。基本上，我希望用户点击查询/搜索栏中的一个otpions，并获得在另一个div中显示的相关JSON数据。使用ng-click和ng-show，我能够显示div，但我无法显示JSON数据。

这是我的代码：

＆＃13;

var app = angular.module('myApp', []);
     app.controller("MyCtrl", function($scope) {
	$scope.myvalue = false;
	$scope.showAlert = function(){
	  $scope.myvalue = true;  
	};
	 $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 -->

＆＃13;

<head>
	<!---AngularJS--->
	<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">              
			<section class="form">
				<form class="form-inline">
					<input class="input-special" ng-model="query" type="text" placeholder="Search school rankings" autofocus>
				</form>
				<ul ng-show="query" class="ng-hide" ng-repeat="school in schools | filter:query | orderBy: 'name' | limitTo: 15">
					<li ng-show="school" class="result">
						<span class="category"><a ng-click="showAlert()">{{school.campus}}</a></span>
						<span class="category"><i class="fa fa-pencil" aria-hidden="true"></i> {{school.level}}</span>
						<span class="category">District: {{school.districtcleaned}}</span>
						<span class="category">Grade: {{school.gradesimplified}}</span>
					</li>
				</ul>
				<div class="school-details ng-hide" ng-show="myvalue">
					<p>School: {{school.campus}}</p>
					<p>District: {{school.districtcleaned}}</p>
				</div>
			</section>
		</div>
</body>

＆＃13;

我是AngularJS和JSON的新手，所以我们将不胜感激。谢谢！

Answer 1

您正在访问ng-repeat块之外的变量学校。那里学校不存在。你应该把这个div移到ng-repeat ul元素中。

然后在角度你有一个适当的JSON过滤器，但在这里你不需要它。这是直接显示JSON格式。您只是访问对象的属性。在这里链接到它：

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

这是你的正确例子。单击a元素，可以正确显示详细信息：

var app = angular.module('myApp', []);
app.controller("MyCtrl", function($scope) {
	$scope.myvalue = false;
	$scope.showAlert = function(){
	  $scope.myvalue = true;  
	};
	 $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">              
			<section class="form">
				<form class="form-inline">
					<input class="input-special" ng-model="query" type="text" placeholder="Search school rankings" autofocus>
				</form>
				<ul ng-show="query" class="ng-hide" ng-repeat="school in schools | filter: query | orderBy: 'name' | limitTo: 15">
					<li ng-show="school" class="result">
						<span class="category"><a ng-click="showAlert()">{{school.campus}}</a></span>
						<span class="category"><i class="fa fa-pencil" aria-hidden="true"></i> {{school.level}}</span>
						<span class="category">District: {{school.districtcleaned}}</span>
						<span class="category">Grade: {{school.gradesimplified}}</span>
					</li>
          
          <div class="school-details ng-hide" ng-show="myvalue">
            <p>School: {{school.campus}}</p>
            <p>District: {{school.districtcleaned}}</p>
          </div>
				</ul>
			</section>
		</div>
</body>

Ng-click和ng-show不会显示JSON数据

1 个答案: