AngularJs Divs不会使用<select>

Question

在我看来，我有这个： ＆LT; DIV＆GT;    ＆lt; select ng-model =“chartType”ng-change =“AnalyticsChartTypeChanged（chartType）”            ng-init =“chartType ='数据网格'”＆gt;       ＆lt; option value =“Data grid”＆gt; Data grid＆lt; / option＆gt;       ＆lt; option value =“Histogram”＆gt; Histogram＆lt; / option＆gt; ＆LT; /选择＆GT; {{图图表类型}} ＆lt; br＆gt; showAnalyticsDataGrid == {{showAnalyticsDataGrid}} ＆lt; br＆gt; showAnalyticsHistogram == {{showAnalyticsHistogram}} ＆lt; div ng-show =“{{showAnalyticsDataGrid}}”＆gt;    ＆lt; p＆gt;数据网格到这里＆lt; / p＆gt; ＆LT; / DIV＆GT; ＆lt; div ng-show =“{{showAnalyticsHistogram}}”＆gt;    ＆lt; p＆gt;直方图在这里＆lt; / p＆gt; ＆LT; / DIV＆GT; 和ng-chnage功能是 $ scope.AnalyticsChartTypeChanged = function（chartType） {     开关（chartType）     {         case'数据网格'：$ scope.showAnalyticsDataGrid = true;                             $ scope.showAnalyticsHistogram = false;                             console.log（'显示分析数据网格'）;                             打破;         case'Histogram'：$ scope.showAnalyticsDataGrid = false;                             $ scope.showAnalyticsHistogram = true;                             console.log（'显示分析直方图'）;                             打破;     } } 当我无意中选择每个选项时，调试文本会相应地更新： 数据网格 showAnalyticsDataGrid == true showAnalyticsHistogram == false 和 直方图 showAnalyticsDataGrid == false showAnalyticsHistogram == true 但是，它不断显示数据网格DIV，而不是Historgram DIV。 显然，我犯了一个极其简单的错误，但我只是看不到它:-(

Answer 1

您不在{{}}中使用ng-show插值。像许多其他指令一样，它直接评估表达式

更改

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

要

<div ng-show="showAnalyticsHistogram">

Answer 2

使用ng-show，您可以给它一个表达式并为您评估它。你在这里尝试做的是使用双花括号{{}}来评估表达式，这是没有意义的。如果您只是删除那些双花括号并使用如下的ng-show：

ng-show="showAnalyticsDataGrid"

它会正常工作。

另外，请记住这两个变量没有被初始化，因此当视图加载时，默认情况下不会显示div，但是你可以使用ng-init修复它。

这是一个小提琴。 http://jsfiddle.net/5DMjt/5248/