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>

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

2 个答案: