AngularJs隐藏表头问题

时间:2018-01-03 11:44:38

标签: angularjs

我正在尝试创建足球比分的角度应用,其中用户可以在2015年进行勾选并且只能获得2015年举行的比赛的信息,所以当我点击2015复选框时,仅显示2015年举行的比赛,但比赛是未在2015年举行也显示空白表头我无法隐藏角度,我的问题可以解决,如果那些空白的表头可以隐藏,请下载并运行服务器,然后你将清楚地了解问题。下载链接:http://www99.zippyshare.com/v/F44Cr5Go/file.html

由于

1 个答案:

答案 0 :(得分:0)

您也应该检查表头。这就是你在这里所缺少的。我已经添加了表格和标题(h3标签)的检查,假设每个部分的数据将是同一年。

但是,我相信你应该使用一些过滤器来处理它(在将它传递给html之前处理控制器中的数据)

<p class="mypara">Filters :</p>
<h3>2015 {{vm.isChecked2015}} <input type="checkbox" ng-model="isChecked2015" value="2015"></h3>

<div>
  <div class="table-responsive" dir-paginate="data in vm.rounds.concat(vm.rounds1) | itemsPerPage: 50" class="col-12 text-center" ng-if="isChecked2015">
      <table class="table table-sm table-dark" ng-if="data.matches[0].date.slice(0,4) == 2015">
        <thead>
          <tr>
          <th scope="col" class="p-3"># -- {{vm.isChecked2015}}</th>
          <th scope="col" class="p-3">Date -1</th>
          <th scope="col" class="p-3">Team1</th>
          <th scope="col" class="p-3">Score</th>
          <th scope="col" class="p-3">Team2</th>
          <th scope="col" class="p-3">Winner Team</th>
          </tr>
        </thead>
        <div ng-if="data.matches[0].date.slice(0,4) == 2015"><h3>{{data.name}}</h3>
          <tbody>
            <tr ng-repeat="matchday in data.matches track by $index">
            <th scope="row" class="p-3">{{$index+1}}</th>
            <td class="p-3">{{matchday.date}}</td>
            <td class="p-3">{{matchday.team1.name}}</td>
            <td class="p-3"><span ng-class="{won: matchday.score1 > matchday.score2, lost:matchday.score1 < matchday.score2, equal:matchday.score2 == matchday.score1}">{{matchday.score1}}</span><span class="vs">VS</span><span ng-class="{won: matchday.score2 > matchday.score1, lost:matchday.score2 < matchday.score1, equal:matchday.score2 == matchday.score1}">{{matchday.score2}}</span></td>
            <td class="p-3">{{matchday.team2.name}}</td>
            <td class="p-3" ng-show="matchday.score1 > matchday.score2">{{matchday.team1.name}}</td>
            <td class="p-3" ng-show="matchday.score2 > matchday.score1">{{matchday.team2.name}}</td>
            <td class="p-3" ng-show="matchday.score1 == matchday.score2">Draw</td>
            </tr>
          </tbody>
        </div>
      </table>
  </div>
</div>
<dir-pagination-controls template-url="angular/templates/pagination.html"></dir-pagination-controls>

相关问题