Изменение цвета <td> в статической таблице HTML, в зависимости от того, являются ли данные BackEnd истинными или нет в AngularJS без ng-Repeat

Question

Предупреждение: некоторые слова находятся на французском языке в моем коде на фотографиях, поэтому я объясню, что здесь

This is table I am trying to change the color depending on the true of false value

это простой график disponibility для каждого работника за периоды AM, PM и полдень дня.

На данный момент все, что я пытаюсь сделать, это показать значения, если кто-то доступен в тот период этого дня, он станет зеленым. В моей базе данных каждый отображаемый здесь период находится в битовых значениях.

Я буду использовать комбо-бокс для переключения сотрудников (сейчас это отобразить их ID, но это только временное)

Проблема заключается в том, что я не могу получить, чтобы отобразить их должным образом, значения неверны! Так что я собираюсь опубликовать мусорную корзину моего кода для этой части прямо здесь.

<!-- The view code--> 

<div class="row"> 
    <div class="col-lg-10"> 
     <div class="panel panel-default" style="margin-top:10px;"> 
      <div class="panel-heading"> 
       <b>Horraires des disponibilités </b> 
      </div> 


      <div class="panel-body"> 

       <div class="col-lg-5"> 
        <div > 
         <label> Employer </label> 
         <select ng-model="emp.EmployerID" ng-change="SelectedEmployer(emp.EmployerID)" class="form-control"> 
          <option ng-repeat="emp in LesDisponibilites" >{{emp.EmployerID}}</option> 

         </select> 

        </div> 
       </div><div class="col-lg-6"><div class="dataTables_filter"><label><b>Search:</b><input type="search" class="form-control input-sm" placeholder="" aria-controls="dataTables-example"></label></div></div> 


       <!-- /.panel-heading --> 

       <div class="col-lg-10 "> 
        <div class="table-responsive"> 
         <table class="table table-bordered table-hover table-striped"> 
          <thead > 
           <tr> 
            <th>Jour</th> 
            <th>AM</th> 
            <th>PM</th> 
            <th>Soir</th> 

           </tr> 
          </thead> 
          <tbody > 
           <tr > 
            <td>Lundi</td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Lundi_AM)" style="background-color:{{DispoColor}};"></td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Lundi_PM)" style="background-color:{{DispoColor}};"></td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Lundi_Soir)" style="background-color:{{DispoColor}};"></td> 

           </tr> 
           <tr> 
            <td>Mardi</td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Mardi_AM)" style="background-color:{{DispoColor}};"></td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Mardi_PM)" style="background-color:{{DispoColor}};"></td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Mardi_Soir)" style="background-color:{{DispoColor}};"></td> 

           </tr> 
           <tr> 
            <td>Mercredi</td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Mercredi_AM)" style="background-color:{{DispoColor}};"></td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Mercredi_PM)" style="background-color:{{DispoColor}};"></td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Mercredi_Soir)" style="background-color:{{DispoColor}};"></td> 

           </tr> 
           <tr> 
            <td>Jeudi</td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Jeudi_AM)" style="background-color:{{DispoColor}};"></td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Jeudi_PM)" style="background-color:{{DispoColor}};"></td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Jeudi_Soir)" style="background-color:{{DispoColor}};"></td> 

           </tr> 
           <tr> 
            <td>Vendredi</td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Vendredi_AM)" style="background-color:{{DispoColor}};"></td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Vendredi_PM)" style="background-color:{{DispoColor}};"></td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Vendredi_Soir)" style="background-color:{{DispoColor}};"></td> 

           </tr> 
           <tr> 
            <td>Samedi</td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Samedi_AM)" style="background-color:{{DispoColor}};"></td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Samedi_PM)" style="background-color:{{DispoColor}};"></td> 
            <td ng-required="IsDispo(LesDisponibilites[Lindex].Samedi_Soir)" style="background-color:{{DispoColor}};"></td > 

           </tr> 


          </tbody> 
         </table> 

        </div> 
        <!-- /.table-responsive --> 
       </div> 
      </div> 
      <div class="panel-footer"> 

      </div> 
     </div> 
    </div> 
    </div> 




    // Controller code 
    myappCtrl.controller('DisponibiliteCtrl', ['$scope', '$http', function ($scope, $http) { 

    var url = "http://localhost:64124/api/disponibilites" 

    $scope.DispoColor = "none"; 
    $scope.LesDisponibilites = {}; 
    $scope.Lindex = {}; 

    // Récupère le date 
    $http.get(url).then(function (result) { 
     $scope.LesDisponibilites = result.data; 
    }) 

    $scope.SelectedEmployer = function (index) { 

     console.log(index); 
     $scope.Lindex = index -1; 

    } 

    // Pour ajouter les couleurs qui indiques les disponibilités 
    $scope.IsDispo = function (Dispo) { 



     if (Dispo == true) { 
      $scope.DispoColor = "#0ac20a"; 
     } 
     else { 
      $scope.DispoColor = "none"; 
     } 


    } 

Кроме того, это странно, но когда я переключаюсь на нг-модель вместо нг-необходимого, кажется, показывают правильные данные, но консоль сходит с ума с ошибкой, так как нг-модель не должна быть используйте для функции.

Я пробовал много вещей, и я потерялся прямо сейчас. Надеюсь, кто-то здесь может мне помочь.

Answer 1

Вы можете использовать ng-style или ng-class, чтобы сделать это.

нг-стиль = «выражение» или нг-класс = «выражение»

В вашем случае, в качестве примера можно применить следующий способ для ваших строк.

<td ng-style="LesDisponibilites[Lindex].Lundi_AM ? {'background-color':'#0ac20a'}:'none' ></td> 

Answer 2

Попробуйте использовать свойство ng-class.

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

<div class="table-responsive"> 
    <table class="table table-condensed"> 
     <thead> 
     <tr> 
     <th class="col-xs-4">COLUMN1</th> 
     <th class="col-xs-1">COLUMN2</th> 
     <th class="col-xs-1">COLUMN3</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="obj in anyObject" ng-class="{'info': obj.value1}"> 
     <td class="col-xs-2">{{obj.value1}}</td> 
     <td class="col-xs-1">{{obj.value2}}</td> 
     <td class="col-xs-1">{{obj.value3}}</td> 
     </tr> 
     </tbody> 
    </table> 
    </div>