顯示右側的內容

Question

這裏的演示顯示http://plnkr.co/edit/4BahcwPQp2vUi9rAEEXR?p=preview我面臨兩個問題，可以使用簡單的css/bootstrap代碼解決。

以下是我所面臨的問題。

1）我試圖在用戶單擊左側的任何選項時在右側顯示內容。現在，當用戶點擊任何鏈接（操作系統軟件包，選項二）時，內容將顯示在plnkr演示中列出的選項中。任何建議如何在用戶點擊任何選項時在右側顯示內容。

2）第二個問題是當用戶點擊一個選項，它顯示的內容，並再次如果用戶選擇相同的選項，它隱藏內容。我不想再次隱藏內容時，用戶單擊第二次同樣的鏈接。我試圖修改ng-click，但無法獲得預期的輸出結果。

的html代碼：

<div ng-controller="MainCtrl"> 
<div class="row"> 
<div class="col-sm-12"> 
<div class="panel panel-primary"> 
<div class="modal-body"> 
<div class="row"> 
<div ng-controller="MainCtrl"> 
    <div class="workspace"> 
    <div class="sidebar-wrap"> 
     <h3>Click below options:</h3> 
     <div class="sidebar-contents"> 
    <a class="nav clearfix" 
     ng-click="showOsPackages=!showOsPackages; optionTwo=false;" 
     ng-class="{ 'active' : showOsPackages }"> 
OS Packages 
    </a> 
    <p> 
    <a class="nav clearfix" 
     ng-click="optionTwo=!optionTwo; showOsPackages=false" 
     ng-class="{ 'active' : optionTwo }"> 

     Option Two 

    </a> 
    </p> 
     </div> 
    </div> 
     <div class="" ng-show="showOsPackages"> 
    <h1>OS Packages</h1> 
    <p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p> 
    </div> 
    <div class="" ng-show="optionTwo"> 

    <h1>Option Two</h1> 
    <p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p> 
    </div> 

    </div> 
</div> 
</div> 
</div> 

JS代碼：

var app = angular.module('plunker', ["ngAnimate"]); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'slideout steeze'; 
}); 

任何建議將是有益的。

Answer 1

我檢查了你的代碼。這裏是更正。

• 我試圖在用戶單擊左側的任何 選項時顯示右側的內容。當用戶點擊 任何鏈接（操作系統軟件包，選項二）時，內容將顯示在 中，直到plnkr演示中列出的選項。任何 建議如何顯示右側的內容時，用戶 點擊任何選項。

首先我包裹在一個包裝DIV您的內容與類contents-wrap那麼sidebar-wrapper和contents-wrap可以分別設置爲30%和70%，使我們得到想要的結果。

CSS：

.contents-wrap{ 
    display:inline-block; 
    width:70%; 
    float:left; 
} 

.sidebar-wrap{ 
    display:inline-block; 
    width:30%; 
    float:left; 
} 

• 而第二個問題是，當一個選項的用戶點擊，它顯示的內容，如果用戶再次選擇相同的選項則隱藏content.I不要」當用戶第二次點擊相同的鏈接時，不想再次隱藏內容。我試圖修改ng-click，但無法獲得預期的輸出結果。

爲此，我建議將相應變量設置爲true，而不是切換輸入。

Plunkr Demo

但這裏是一個更好的版本，在這裏你只用一個變量toggle並設置所選標籤名稱來切換變量，使用該方法，需要進行定義的變量數量減少。

Plunkr Demo