AngularJs div一定不會切換使用<select>

Question

我在我看來，有這樣的：

<div> 
    <select ng-model="chartType" ng-change="AnalyticsChartTypeChanged(chartType)" 
      ng-init="chartType='Data grid'"> 
     <option value="Data grid">Data grid</option> 
     <option value="Histogram">Histogram</option> 
</select> 

{{chartType}} 
<br>showAnalyticsDataGrid == {{showAnalyticsDataGrid}} 
<br>showAnalyticsHistogram == {{showAnalyticsHistogram}} 

<div ng-show="{{showAnalyticsDataGrid}}"> 
    <p>Data grid goes here</p> 
</div> 

<div ng-show="{{showAnalyticsHistogram}}"> 
    <p>Histogram goes here</p> 
</div> 

和NG-chnage funtion是

$scope.AnalyticsChartTypeChanged = function(chartType) 
{ 
    switch (chartType) 
    { 
     case 'Data grid': $scope.showAnalyticsDataGrid = true; 
          $scope.showAnalyticsHistogram = false; 
          console.log('Show analytics data grid'); 
          break; 

     case 'Histogram': $scope.showAnalyticsDataGrid = false; 
          $scope.showAnalyticsHistogram = true; 
          console.log('Show analytics histogram'); 
          break; 

    } 
} 

當我alernately選擇每個選項，調試文字更新correcrly：

Data grid 
showAnalyticsDataGrid == true 
showAnalyticsHistogram == false 

和

Histogram 
showAnalyticsDataGrid == false 
showAnalyticsHistogram == true 

但是，它不斷顯示數據網格DIV和從不Historgram DIV。

Obviouly我想提出一個簡單的extermely的錯誤，但我看不出它:-(

Answer 1

用ng-show，你給它一個表達式，它會爲你評估它。你在這裏要做的是使用雙花括號{{}}來評估表達式，這是沒有意義的。如果你只是刪除那些雙花括號，並使用這樣的ng顯示：

ng-show="showAnalyticsDataGrid" 

它會工作得很好。

另外，請記住，這兩個變量沒有被初始化，因此當視圖加載時，默認情況下不會顯示div，但是您可以使用ng-init修復它。

這是一個小提琴。 http://jsfiddle.net/5DMjt/5248/

Answer 2

你不ng-show使用{{}}插值。像許多其他指令，它直接計算表達式

更改

<div ng-show="{{showAnalyticsHistogram}}"> 

要

<div ng-show="showAnalyticsHistogram">