计算百分比并将其放入进度条

Question

您好，我有一些来自 2014 年世界杯的数据，我会存储该人是否正确投注了比赛。

看起来像这样（angularjs-controller 中的数据）：

 $scope.users=  [{
             id: 1,
             name: 'Jake',
             loss: 22,        
             win: 10
         },
         {
             id: 2,
             name: 'Bran',
             loss: 18,
             win: 14
         }];

我想计算获胜次数的百分比。 如果我将总胜场数除以总比赛数，例如 18/(18+14) = 56%，就可以做到这一点。 我需要从 json 中的每个用户那里获取数据并计算获胜的百分比。 稍后我想将该百分比添加到视图中每个用户的进度条：

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Wins</span>
  </div>

我怎样才能做到这一点？

Answer 1

你可以这样做：

<div class="progress progress-striped" ng-repeat="user in users">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: {{(user.win)/(user.win+user.loss)}}%">
    <span class="sr-only">{{(user.win)/(user.win+user.loss)}}% Wins</span>
  </div>
</div>

Answer 2

这应该很适合你。

const users = [ // Total number of each user trials = 32
  { id: 1, name: 'Jake', win: 10, loss: 22 },
  { id: 2, name: 'Ann', win: 14, loss: 18 },
  { id: 3, name: 'Emeka', win: 30, loss: 2 },
  { id: 4, name: 'Mike', win: 32, loss: 0 },
];

const calculateWinPercentage = (win, loss) => {
  // add each user win and loss,
  // divide it by user win,
  // multiply the result by 100.

  console.log((win / (win + loss)) * 100);
  return (win / (win + loss)) * 100;
};    

<div class="info_div">
  {users.map((user) => {
    const winPercentage = calculateWinPercentage(user.win, user.loss);

    return (
      <div key={user.id} class="progress">
        <div
          class="progress-bar"
          role="progressbar"
          style={{
            width: winPercentage + "%",
          }}
          aria-valuenow={winPercentage}
          aria-valuemin="0"
          aria-valuemax="100"
        >
          {winPercentage}% Wins
        </div>
      </div>
    );
  })}
</div>