Question

我正在创建一个包含两个框的应用程序。在左侧div上，它将显示可点击链接的列表，一旦点击它将显示链接到右侧div的信息。我已设法让我的数据隐藏并显示何时点击链接但仅在同一div内。在使用Angular进行此操作时，最好的appraoch是什么？

<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>

角：

   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

你应该添加到你的第二个div ng-show='showdata' - 另一个选项是显示是否填充了$ scope.showFaq，这将消除处理另一个变量

此外，您ng-repeat应该在li而不是ul - ng-repeat应该在您要重复的元素上（与其他语言中的大多数for循环不同）

填充$ scope.faqs后，列表将显示链接。

单击选定的faq后，它将用于填充$ 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 个答案: