Angularjs: ячейки таблицы цветов динамически - PullRequest
Новая
       2

Angularjs: ячейки таблицы цветов динамически

0 голосов
/ 18 декабря 2018

Я хочу раскрасить ячейки таблицы согласно их значению.Этот код не работает, тогда как он должен делаться как <1 </p>

HTML 

<td class="text-center col-md-1"
    ng-class="{'redCell': vivier.value1/vivier.value2<1}" >
    {{vivier.value1/vivier.value2}}
</td>

CSS 

.redCell {
    background-color: red;
}

Знаете ли вы, почему?

Ответы [ 3 ]

0 голосов
/ 18 декабря 2018

Вместо ng-класса вы можете использовать ng-стиль следующим образом: 

<td class="text-center col-md-1" ng-style="yourStyle">{{vivier.value1/vivier.value2}}</td>

, затем в файле JS: 

yourStyle = {"background-color": "red"}

Это просто пример.Вы можете изменить любое значение по своему желанию.

0 голосов
/ 18 декабря 2018

Попробуйте это 

<td  class="text-center col-md-1" ng-class="{{vivier.value1/vivier.value2 < 1}}?'redCell':'otherCell'"> {{vivier.value1/vivier.value2 < 1}}</td>


var app = angular.module("MyApp", []);

app.controller("MyCtrl", function($scope, $http){

 $scope.vivier = {'value1': 4,'value2': 2};
  $scope.test ="test";
});
.redCell {
    background-color: red;
}
.otherCell{
  background-color:yellow;
  
}
<!DOCTYPE html>
<html lang="en" dir="ltr" ng-app="MyApp" >
<head>
  <meta charset="utf-8">
  <title>HHS - Problems</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/main.css">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-route.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!--<script src="scripts/bundle.public.min.js" type="text/javascript"></script>-->
  <!--<script src="scripts/DemoController.js" type="text/javascript"></script>-->
  <script src="js/main.js"></script>
</head>
 <body ng-controller="MyCtrl">
   <table>
<tr >
<td  class="text-center col-md-1" ng-class="{{vivier.value1/vivier.value2 < 1}}?'redCell':'otherCell'"> {{vivier.value1/vivier.value2 < 1}}</td>
  
  <td  class="text-center col-md-1" ng-class="{{vivier.value2/vivier.value1 < 1}}?'redCell':'otherCell'"> {{vivier.value2/vivier.value1 < 1}}</td>
  
</tr>

   </table>
</body>
</html>
0 голосов
/ 18 декабря 2018

Тебе лучше попробовать вот так: 

<td class="text-center col-md-1" ng-class="{(vivier.value1/vivier.value2)<1 ? 'redCell' : 'normalCell'}" >{{vivier.value1/vivier.value2}}</td>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...