在 angularjs 中使用 ng-class 替换而不是附加到 CSS classes？

Question

我正在做 SPA 来测试我的 AngularJS 知识。在这个应用程序中，我有一个模板，用户可以在其中选择按钮来显示他们想要多少天的天气预报。

我正在使用 Twitter Bootstrap classes 和 AngularJS ngClass 动态地拥有 Twitter Bootstrap CSS class根据选择的按钮绑定到按钮元素。

我希望发生的是，在模板的 HTML 中使用 ng-class，如果选择了按钮，它将更改 Bootstrap CSS 该按钮的 class 从 btn btn-primary 变为 btn btn-disabled，因此无法选择它，因为它已全部准备就绪。我在 HTML 中为这个模板做了这个 —

  <div class="btn-group" role="group">
    <a href="#/forecast/1" class="btn btn-primary" ng-class="{  'btn btn-disabled' : days === '1' }">1 Day Forecast</a><a href="#/forecast/2" class="btn btn-primary" ng-class="{  'btn btn-disabled' : days === '2' }">2 Day Forecast</a><a href="#/forecast/3" class="btn btn-primary" ng-class="{  'btn btn-disabled' : days === '3' }">3 Day Forecast</a>
  </div>
  <div class="btn-group" role="group">
    <a href="#/forecast/5" class="btn btn-primary" ng-class="{  'btn btn-disabled' : days === '5' }">5 Day Forecast</a><a href="#/forecast/7" class="btn btn-primary" ng-class="{  'btn btn-disabled' : days === '7' }">7 Day Forecast</a><a href="#/forecast/10" class="btn btn-primary" ng-class="{  'btn btn-disabled' : days === '10' }">10 Day Forecast</a>
  </div>

但是，当我运行这个时，我没有将元素 btn btn-primary 的 Bootstrap CSS class 替换为 [=19] =], 根据需要;相反，它 appends 到元素上，所以它变成了 btn btn-primary btn-disabled 整体，并且 btn-primary 在视觉上否决了所有内容，所以它最终在输出中看起来像这样—

<a href="#/forecast/1" class="btn btn-primary btn-disabled" ng-class="{  'btn btn-disabled' : days === '1' }">1 Day Forecast</a>

当然，这不是我想要的效果。有人可以告诉我如何在 AngularJS ngClass 中替换 Bootstrap CSS class，而不仅仅是附加它吗？

Answer 1

你是对的，使用 ng-class 将在评估为真时添加 classes。所以解决方案是将两个选项都添加到 ng-class，以便随时添加 btn-primary 或 btn-disabled。

<a href="#/forecast/1" class="btn" 
    ng-class="{'btn-disabled': days === '1', 'btn-primary': days !== '1'}">1 Day Forecast</a>

您也不需要将 class btn 添加到 ng-class，因为无论 days 的值如何，您都希望使用它。

在 angularjs 中使用 ng-class 替换而不是附加到 CSS classes？

Having ng-class in angularjs replace instead of append to CSS classes?

angularjs

twitter-bootstrap-3

ng-class