我正在创建一个有两个框的应用程序。在左侧 div 上，它将显示可单击链接的列表，单击后，它将在右侧 div 上显示该链接信息。我已经设法让我的数据在单击链接时隐藏和显示，但仅限于同一 div 内。使用 Angular 执行此操作的最佳方法是什么？
<div class="row" ng-controller="faqController">
<div class="col-md-6">
<div class="col-md-12">
<div class="guide-section">
<h1>Select a Topic</h1>
<ul ng-repeat="faq in faqs">
<li><a href="#" ng-click="showData=!showData">{{ faq.title }}</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="guide-section">
<div ng-repeat="faq in faqs">
<h1>{{ faq.title }}</h1>
<p>{{ faq.info }}</p>
</div>
</div>
</div>
</div>
Angular :
var myApp = angular.module('supportApp', ['ngRoute', 'ngResource']);
myApp.controller('faqController', ['$scope', '$http', function($scope, $http) {
$scope.showData = true;
$http.get('data/faq.json').
success(function(data, status, headers, config) {
$scope.faqs = data;
//console.log(data);
}).
error(function(data, status, headers, config) {
//Complete error fallback
});
}]);
最佳答案
您应该添加到第二个 div ng-show='showdata' - 另一种选择是显示 $scope.showFaq 是否已填充，这将消除处理另一个变量
此外，您的 ng-repeat 应该在您的 li 中，而不是 ul - ng-repeat 应该是在您想要重复的元素上(与其他语言中的大多数 for 循环不同)
填充 $scope.faqs 后，列表将显示链接。
单击选定的常见问题解答后，它将用于填充 $scope.showFaq 并且 $scope.showData 设置为 true...
// main.js
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.showData = false;
$scope.showHide = function(faq) {
$scope.showData = true;
$scope.showFaq = faq;
};
$scope.faqs = [
{'title': 'title 1', 'info': 'info 1'},
{'title': 'title 2', 'info': 'info 2'}
];
});<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8" />
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="col-md-6">
<div class="col-md-12">
<div class="guide-section">
<h1>Select a Topic</h1>
<ul>
<li ng-repeat="faq in faqs"><a ng-click="showHide(faq)">{{ faq.title }}</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="guide-section" ng-show="showData">
<h1>{{ showFaq.title }}</h1>
<p>{{ showFaq.info }}</p>
</div>
</div>
</body>
</html>关于javascript - 跨两个容器使用 ng-repeat，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31331072/