AngularJs ng-repeat добавляет Color к наибольшему значению ячейки в соответствующем столбце - PullRequest
Новая
       2

AngularJs ng-repeat добавляет Color к наибольшему значению ячейки в соответствующем столбце

0 голосов
/ 19 марта 2019

Я новичок в Angularjs и не знаю, как этого добиться.

Я хотел бы добавить цвет участника с наибольшим значением Пропущено, поле Процент цели.Это возможно?the sample table

есть способ изменить цвет значения на зеленый для элемента с наибольшим значением в каждом столбце.

enter image description here вот так: (желаемый результат)

это мой HTML-код: 

<body ng-app="myApp" ng-controller="myCtrl">
<table border="2">
    <tr>
        <th>Members</th>
        <th>Score</th>
        <th>Missed</th>
        <th>FG%</th>
    </tr>
    <tr ng-repeat="member in members">
        <td>{{member.name}}</td>
        <td>{{getScore(member.shotMade)}}</td>
        <td>{{getMissed(member.shotMade, member.shotAttemp)}}</td>
        <td>{{getFG(member.shotMade, member.shotAttemp)}}</td>
    </tr>
</table>

это мой код JavaScript: 

const app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
    $scope.test = "success";
    $scope.members = 
    [
        {name:'Kobe', shotMade:23, shotAttemp:44},
        {name:'lebron', shotMade:21, shotAttemp:33},
        {name:'Jordan', shotMade:32, shotAttemp:43},
        {name:'Hakeem', shotMade:20, shotAttemp:21},
    ]
    $scope.getScore = (made)=> made * 2;
    $scope.getMissed = (made, attemp) => attemp - made;
    $scope.getFG = (made, attemp) => (made / attemp) * 10000;
});

есть ли способсделать это с помощью angularjs или Javascript?

1 Ответ

2 голосов
/ 19 марта 2019 

angular.module('myApp', []).controller('myCtrl', function($scope) { 
  $scope.members = [
    { name: 'Kobe', shotMade: 23, shotAttemp: 44 },
    { name: 'lebron', shotMade: 21, shotAttemp: 33 },
    { name: 'Jordan', shotMade: 32, shotAttemp: 43 },
    { name: 'Hakeem', shotMade: 20, shotAttemp: 21 }
  ]
  var getScore = (made) => made * 2;
  var getMissed = (made, attemp) => attemp - made;
  var getFG = (made, attemp) => (made / attemp) * 10000;
  
  $scope.maxScore = 0;
  $scope.maxMissed = 0;
  $scope.maxFG = 0;
  for (var member of $scope.members) {
    member.score = getScore(member.shotMade);
    if (member.score > $scope.maxScore)
      $scope.maxScore = member.score;

    member.missed = getMissed(member.shotMade, member.shotAttemp);
    if (member.missed > $scope.maxMissed)
      $scope.maxMissed = member.missed;

    member.fg = getFG(member.shotMade, member.shotAttemp);
    if (member.fg > $scope.maxFG)
      $scope.maxFG = member.fg;
  }
});
.maxGreen {
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js">
</script>

<body ng-app="myApp" ng-controller="myCtrl">
  <table border="2">
    <tr>
      <th>Members</th>
      <th>Score</th>
      <th>Missed</th>
      <th>FG%</th>
    </tr>
    <tr ng-repeat="member in members">
      <td>{{member.name}}</td>
      <td ng-class='{maxGreen: member.score == maxScore}'>{{member.score}}</td>
      <td ng-class='{maxGreen: member.missed == maxMissed }'>{{member.missed}}</td>
      <td ng-class='{maxGreen: member.fg == maxFG}'>{{member.fg}}</td>
    </tr>
  </table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...