在两个容器中使用ng-repeat

我正在创建一个具有两个框的应用程序。在左边div上它会显示一个可点击链接的列表，一旦点击它将显示链接右侧div的信息。我设法让我的数据隐藏并显示链接被点击的时间，但只在同一个div内显示。用Angular做这件事时最好的方法是什么？在两个容器中使用ng-repeat

<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 
    }); 
}]);

来源

2015-07-10 James Ives

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

另外，你ng-repeat应该在你的li不是ul - ng-repeat应该在你想重复的元素上（不像其他语言的大多数循环）

一旦您填充$ 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>

来源

2015-07-10 01:41:44 Incognos

虽然这个作品中，第二列是我想要显示数据的位置，我遇到了在几个div之间切换的问题，因为我是从不同的列重复它。希望这是有道理的。 –

啊，我误解了 - 瞧！是否有意义？ – Incognos

只需阅读您的编辑。救了我！对于Angular来说还是很新的，因为某些原因，这让我失望了。谢啦！ –

在两个容器中使用ng-repeat

回答

相关问题