在 Meteor-Angular 应用程序中动态更改背景 CSS答案

【问题标题】：Changing dynamically background CSS in Meteor-Angular app在 Meteor-Angular 应用程序中动态更改背景 CSS
【发布时间】：2015-11-11 05:20:29
【问题描述】：

我正在开发一个 AngularJS Ionic Meteor 应用程序，我需要根据其内容（浮动）更改离子卡底部框的背景颜色。范围是：

data<=80
81 < data <= 160
161 < data <= 233
234 < data<= 317
318 < data <= 400.

有没有 CSS 方法，或者 AngularJS 方法？

【问题讨论】：

所以你基本上是在说：在81到160之间，使用某种背景色；在 161 和 233 之间，使用不同的 bg 颜色；等等？

标签： javascript css angularjs meteor meteoric

【解决方案1】：

您可以使用ngClass。只需设置您的 CSS 背景颜色属性并在您的控制器中设置适当的类，例如：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.submit = function() {
    if ($scope.data <= 80) $scope.rangeColor = "red";
    // Add more conditional statements
    else $scope.rangeColor = "blue";
  }
}

.card {
  border-style: solid;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    <h4>Data:</h4>
    <form ng-submit="submit()">
      <input type="text" name="data" ng-model="data" required>
      <input type="submit" id="submit" value="Submit" />
    </form>
    <br />
    <div ng-class="rangeColor" class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
  </div>
</body>

您还可以在 HTML 元素中实现条件语句：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

}

.card {
  border-style: solid;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    <h4>Data:</h4>
    <input type="text" name="data" ng-model="data" required>
    <br />
    <br />
    <div ng-class="{'red': data <= 80, 'blue': data > 80}" class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
  </div>
</body>

【讨论】：

【解决方案2】：

你可以使用

 ng-style

https://docs.angularjs.org/api/ng/directive/ngStyle

或

ng-class

【讨论】：