在两个容器中使用ng-repeat

Question

I'm creating an application that has two boxes. 我正在创建一个具有两个框的应用程序。 On the left div it will display a list of clickable links, once clicked it will display that links information on the div to the right. 在左侧的div上，将显示可单击链接的列表，单击后将在右侧显示div上的链接信息。 I've managed to get my data to hide and show when the link is clicked but only within the same div. 当链接被单击时，我设法隐藏和显示了我的数据，但仅在同一div中。 What's the best appraoch when it comes to doing this with Angular? 使用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
    });
}]);

Answer 1

you should add to your second div ng-show='showdata' - another option would be to show if $scope.showFaq is populated, which would eliminate dealing with another variable 您应该添加到第二个div ng-show='showdata'另一个选择是显示是否填充了$ scope.showFaq，这将避免处理另一个变量

Also, you ng-repeat should be in your li not ul - ng-repeat should be on the element you want to repeat (unlike most for loops in other languages) 此外，您还ng-repeat应该在你li没有ul - ng-repeat应该是要重复（不像大多数其他语种的循环）的元素

Once you populate the $scope.faqs, the list will show with the links. 填充$ scope.faqs后，该列表将显示链接。

Once you click the selected faq, it is used to populate the $scope.showFaq and $scope.showData is set to true... 单击选定的常见问题解答后，它将用于填充$ 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>

在两个容器中使用ng-repeat

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-07-10 01:41:44

在两个容器中使用ng-repeat

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-07-10 01:41:44

解决方案1
1 已采纳 2015-07-10 01:41:44