AngularJs Divs не будет переключать с помощью <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> 

и нг-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 и никогда не является историческим DIV.

Obviouly Я сделав extermely простую ошибку, но я просто не могу видеть, что это :-(

Answer 1

С ng-show вы даете ему выражение, и оно оценивает его для вас. То, что вы пытаетесь сделать здесь, - это оценить выражение, используя двойные фигурные скобки {{}}, что не имеет смысла. Если вы просто удалить эти двойные фигурные скобки и использовать нг-шоу, как это:

ng-show="showAnalyticsDataGrid" 

он будет работать нормально.

Кроме того, помните, что эти 2 переменные не инициализируются, поэтому при загрузке представления по умолчанию не будет отображаться div, но вы можете исправить это с помощью ng-init.

Вот скрипка. http://jsfiddle.net/5DMjt/5248/

Answer 2

Вы не можете использовать {{}} интерполяции в ng-show. Как и многие другие директивы, она непосредственно вычисляет выражения

Изменение

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

Для

<div ng-show="showAnalyticsHistogram">