Question

您好我想在点击时应用btn-success类的引导样式，并将另一个按钮的类更改为btn-warning。

然而，当我运行它时，引导样式不会改变任何东西。

任何帮助都会很棒。谢谢！

http://plnkr.co/edit/9xV6hRA929sFRDCDBEpy

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/2.0.0-snapshot/angular2.js" data-semver="2.0.0"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="app.js"></script>
    <style type="text/css"></style>
  </head>
  <body ng-controller="MainCtrl">
    <br />
    <br />
    <div class="true col-xs-4">
      <button type="button" class="btn btn-lg btn-block" ng-class="{true: 'btn-success', false: 'btn-warning'}[!yupNope.isSelected]" ng-click="!yupNope.isSelected ? (yupNope.isSelected = !yupNope.isSelected) : ''">True</button>
    </div>
    <div class="false col-xs-4">
      <button type="button" class="btn btn-lg btn-block" ng-class="{true: 'btn-warning', false: 'yupNope'}[!yupNope.isSelected]" ng-click="!yupNope.isSelected ? (yupNope.isSelected = !yupNope.isSelected) : ''">False</button>
    </div>
  </body>

</html>

Answer 1

向后有ng-class个对象。它应该是{'class-name': boolean}您还需要使用可以更改的布尔值，以便可以更改它，而不仅仅是硬编码的true / false

将第一个按钮更改为

<button type="button" class="btn btn-lg btn-block" ng-class="{'btn-success': yupNope.isSelected, 'btn-warning': !yupNope.isSelected}" ng-click="!yupNope.isSelected ? (yupNope.isSelected = !yupNope.isSelected) : ''">True</button>

区别在于ng-class：

ng-class="{'btn-success': yupNope.isSelected, 'btn-warning': !yupNope.isSelected}"

另外，两个按钮的ng-click都是相同的，只有在yupNope.isSelected为假的情况下才会执行此操作。

使用Angular

1 个答案: