При нажатии показать один список и скрыть другой список, используя угловой

Question

При нажатии показать один список и скрыть другой список, используя угловой

0

У меня есть одна табличная структура с использованием div, где я показываю данные. Если я нажму на одну строку, то сокрытие этой строки и показ некоторого контента вместо этого. Это похоже на концепцию google inbox, где при щелчке по строке она покажет только почтовый контент.

Но в папке "Входящие" при нажатии на другое электронное письмо он сначала скрывает уже расширенный контент электронной почты, а затем показывает другой. В моем случае я могу показать контент по щелчку строки, но не могу скрыть уже показанный контент div.

Это мой код, я использовал ng-show и ng-hide вместе с ng-click.

<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.toogleSurvey div.surveyDetailsBox и он также обращается вспять.

Kishan 19 авг. 2016, в 09:10

Источник

0

Любой JS Fiddle или Plunker рабочий пример?
Umair Farooq 19 авг. 2016, в 06:46
1

Можете ли вы опубликовать функции hoverIn() и hoverOut() ? Пожалуйста, добавьте плункер с примером.
Juanjo Salvador 19 авг. 2016, в 06:52
0

Эта концепция похожа на входящие Google. Если вы проверите это, то вы узнаете требование
Kishan 19 авг. 2016, в 07:38

Показать ещё 1 комментарий

Теги:

javascript

jquery

angularjs

2 ответа

Ещё вопросы

Любой JS Fiddle или Plunker рабочий пример?
Можете ли вы опубликовать функции hoverIn() и hoverOut() ? Пожалуйста, добавьте плункер с примером.
Эта концепция похожа на входящие Google. Если вы проверите это, то вы узнаете требование

Pravin · Answer 1 · 2016-08-19T04-59-00.000Z

Проверьте

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>

Aravind · Answer 2 · 2016-08-19T04-19-00.000Z

Попробуйте сделать это.

используйте ng-click и вызовите функцию контроллера, передающую объект съемки, например

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

и в вашем контроллере

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