Angular JS - Показать 1 div и скрыть всех остальных

У меня есть требование переключиться между div show/hide. Я мог бы достичь через следующий кодAngular JS - Показать 1 div и скрыть всех остальных

<div class="fav-player" ng-repeat = "selectedPlayer in selectedPlayers"> 
      <div class="player-head"> 
       <div class="player-name" ng-click="showDetails = ! showDetails" id="name-{{selectedPlayer.id}}">{{selectedPlayer.firstName}})</div> 

      </div> 
      <div class="fav-player-score-detail" id="fav-{{selectedPlayer.id}}" ng-show="showDetails"> 
       Hi, I am {{selectedPlayer.firstName}} - shown now 
      </div> 
    </div>

Щелчок DIV: играющим голова показывает FAV-плеер-счет-деталь Но задача состоит в том, чтобы скрыть все остальные DIVs кроме показанного на рисунке. Я не должен сразу видеть, что все DIVs были расширены. Только один должен быть расширен. Помощь Pls!

Demo Here

Заранее спасибо!

источник

2016-05-09 Suresh PMS

Сохранить выбранные div на ng-click и обновить ng-show для отображения только если это div является выбранный один.

Upd: поддерживать тумблер функциональность для деталей, я хотел бы использовать функцию вместо выражения инлайн.

$scope.toggleDetails = function(name){ 
    if($scope.detailsShown === name){ 
     $scope.detailsShown = null; 
    } else { 
     $scope.detailsShown = name; 
    } 
} 
... 
<div class="player-name" ng-click="toggleDetails(selectedPlayer.firstName)" > 
... 
<div class="fav-player-score-detail" ng-show="selectedPlayer.firstName==detailsShown">

Updated fiddle

источник

2016-05-09 09:56:39

Спасибо Кирилл. но не могли бы вы помочь мне в увольнении расширенного div при нажатии на себя? –

О, это здорово! Большое спасибо Кирилл :) –

Try This

var jimApp = angular.module("mainApp", []); 
 

 
jimApp.controller('mainCtrl', function($scope){ 
 
    $scope.selectedPlayers=[ 
 
    {firstName:'abc', id:1}, 
 
    {firstName:'pqr', id:2}, 
 
    {firstName:'xyz', id:3}, 
 
    {firstName:'ghi', id:4}, 
 
    {firstName:'lmn', id:5} 
 
    ]; 
 
    
 
    $scope.newSelection = function(id){ 
 
    $scope.selected = id; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="mainApp" ng-controller="mainCtrl"> 
 
    <div class="fav-player" ng-repeat = "selectedPlayer in selectedPlayers"> 
 
    <div class="player-head" > 
 
     <div class="player-name" id="name-{{selectedPlayer.id}}" ng-click="newSelection(selectedPlayer.id);">{{selectedPlayer.firstName}}</div> 
 
    </div> 
 
    <div class="fav-player-score-detail" id="fav-{{selectedPlayer.id}}" ng-if="selected == selectedPlayer.id"> 
 
     Hi, I am {{selectedPlayer.firstName}} - shown now 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-05-09 09:50:38 byteC0de

Является ли он рекомендовал использовать условные операторы в угловом View? [Quoted Here] https://docs.angularjs.org/guide/expression _No Control Flow Statements Помимо тернарного оператора (a? B: c) вы не можете написать оператор потока управления в выражении. Причиной этого является ядро философии Angular, что логика приложения должна быть в контроллерах, а не в представлениях. Если вам нужен реальный условный, цикл или выкидывать из выражения вида, делегируйте его вместо метода JavaScript. –

, использующий условие в представлении, является общим – byteC0de

Но, ** Ошибка: Ошибка Lexer: Неожиданный следующий символ в столбцах 1-1 [?] в выражении [a? b: c] ** - ошибка, вызванная угловым –

var app = angular.module('app',[]); 
 
app.controller('myController',function($scope){ 
 
\t \t $scope.selectedPlayers=[ 
 
    {firstName:'abc'}, 
 
    {firstName:'pqr'}, 
 
    {firstName:'xyz'}, 
 
    {firstName:'ghi'}, 
 
    {firstName:'lmn'} 
 
    ]; 
 
    
 
    $scope.showDetailIndex = -1; 
 
    $scope.updateShowIndex = function(index){ 
 
     $scope.showDetailIndex = index; 
 
    } 
 

 

 
});

.player-name{ 
 
\t width:200px; 
 
\t height:20px; 
 
\t border:2px solid tomato; 
 
} 
 
.fav-player-score-detail{color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app="app"> 
 
    <body ng-controller="myController"> 
 
    <div class="fav-player" ng-repeat = "selectedPlayer in selectedPlayers"> 
 
\t \t \t \t <div class="player-head"> 
 
\t \t \t \t \t <div class="player-name" ng-click="updateShowIndex($index);"> 
 
\t \t \t \t \t {{selectedPlayer.firstName}} 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="fav-player-score-detail" ng-show="showDetailIndex == $index"> 
 
\t \t \t \t \t Hi, I am {{selectedPlayer.firstName}} - shown now 
 
\t \t \t \t </div> 
 
     </div> 
 
    </body> 
 
</html>

Updated jsfiddle

источник

2016-05-09 10:02:20

Angular JS - Показать 1 div и скрыть всех остальных

ответ

Смежные вопросы