javascript - 切换 Angular css 类

Question

我正在尝试使用 angularjs 将类 'not-compatible':false 切换为 'not-compatible':true:

    <div class="col status" style="margin-left: 63px;margin-right: 74px; width: 190px">
        <label class="title">Radius</label>
        <img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button UP enable.svg" ng-click="myFunctionUp()/>
        <div id="myDiv" class="status-bar" ng-class="{'not-compatible':false,'in-progress':false} ">
            <label class="number-spolier">1000<span>m</span> </label>
            <span><span></span></span>
        </div>
        <img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button DOWN enable.svg" ng-click="myFunctionDown()/>
    </div>

当单击 img(第一个或第二个)将 div“myDiv”的类更改为 true 时。

有什么想法吗？

Answer 1

应该是这样的在 HTML 中:

<div class="col status" style="margin-left: 63px;margin-right: 74px; width: 190px">
        <label class="title">Radius</label>
        <img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button UP enable.svg" ng-click="myFunctionUp()/>
        <div id="myDiv" class="status-bar" ng-class="{'not-compatible':isCompatible,'in-progress':false} ">
            <label class="number-spolier">1000<span>m</span> </label>
            <span><span></span></span>
        </div>
        <img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button DOWN enable.svg" ng-click="myFunctionDown()/>
    </div>

在 Controller 中:

    $scope.isCompatible = false;
    $scope.myFunctionDown = function(){
      $scope.isCompatible = true;
      //$scope.isCompatible = !$scope.isCompatible; //Or toggle like this
    }