クリックして1つのリストを表示し、角度を使って他のリストを非表示にする

Question

私はdivを使用して1つの表構造を持ち、データを表示しています。私は1つの行をクリックすると、その行を隠して、その代わりにいくつかのコンテンツを表示しています。これは、Google Inboxのコンセプトのようなもので、行をクリックするとそこにメールコンテンツが表示されます。

しかし、インボックスでは、別のメールをクリックすると、すでに展開されているメールの内容が隠れていて、もう1つは表示されます。私の場合は、行のクリックでコンテンツを表示できますが、すでに表示されているコンテンツdivを非表示にすることはできません。

これは私のコードです。ng-clickとng-hideをng-clickとともに使用しました。 div.toogleSurvey上のクリックで

<div class="surveyList" ng-repeat="survey in allSurveys"> 
    <span class="checkbox" ng-hide="showDetails"></span> 
    <div class="toogleSurvey" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-click="showDetails=!showDetails" ng-hide="showDetails"> 
    <div>{{survey.Name}}</div> 
    <div>{{survey.Type}}</div> 
    <div class="hidden-xs">{{survey.SurveyReference}}</div> 
    <div class="hidden-xs">{{survey.CreatedDate}}</div> 
    <div class="hidden-xs SurveyLastChild">{{survey.Status}}</div> 
    <div class="hidden-xs surveyListTool" ng-show="hoverEdit"> 
     <a class="editSurvey"><img src="images/edit_normal.png" /></a> 
     <a class="deleteSurvey"><img src="images/delete_normal.png" /></a> 
     <a class="exportSurvey"><img src="images/export_normal.png" /></a> 
     <a class="menuSurvey"><img src="images/menu_normal.png" /></a> 
    </div> 
    </div> 
    <div class="surveyDetailsBox" ng-show="showDetails" ng-click="showDetails=!showDetails"> 
    <div class="surveyDetailHead"> 
     <p class="surveyTitle">{{survey.Name}}</p> 
     <div class="surveyDetailHeadTool"> 
     <a class="editSurvey"><img src="images/edit_normal.png" /></a> 
     <a class="deleteSurvey"><img src="images/delete_normal.png" /></a> 
     <a class="exportSurvey"><img src="images/export_normal.png" /></a> 
     <a class="menuSurvey"><img src="images/menu_normal.png" /></a> 
     </div> 
    </div> 
    </div> 
</div> 

はdiv.surveyDetailsBoxを示していますし、それはまた、逆になります。

Answer 1

この方法を試してください。

使用NGクリックし

<div class="toogleSurvey" ng-click="showSurveyDetailsBox(survey)"> 

のようにして、コントローラに調査対象を渡しコントローラ機能を呼び出す

$scope.showSurveyDetailsBox = function(surveyobj) 
{ 
    $scope.surveyobjectForDetailsBox = surveyobj; 
    $scope.showSurveyDetails = true; 
} 

Answer 2

チェック

var app = angular.module("myapp", []); 
 
app.controller("myctrl", ['$scope', function($scope) { 
 
    
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp"> 
 
    <div ng-controller="myctrl"> 
 
    <div> 
 
    <div class="toogleSurvey" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-click="showDetails=!showDetails" ng-hide="showDetails"> 
 
     Click on toogleSurvey 
 
</div> 
 
    
 
     <div class="surveyDetailsBox" ng-show="showDetails" ng-click="showDetails=!showDetails"> 
 
Click on surveyDetailsBox 
 
     </div> 
 
    </div> 
 
</div>