Question

我正在创建一个带有angularjs的练习项目，我想我已经完成了它，当一个奇怪的bug出现时我无法解决它。要了解该错误，请转到此heroku应用程序：https://stormy-refuge-89690.herokuapp.com

Check Mark 2015
点击“按团队搜索1”下的输入搜索字段，然后输入“everton”。
现在您可以看到所有内容都已正确过滤。现在从此输入字段中删除“everton”。
在“按团队搜索2”下输入的输入中键入“everton”。
您会看到一些空行。

这些空白行是根据我在all-controller.js中使用的代码逻辑不应出现的问题：

vm.checkTeams = function(matches, teamSearch, team1Search, team2Search){
    var found = false;
    if(teamSearch != undefined){
        found = true;
    }
    if(team1Search != undefined){
        matches.forEach(function(data){
            var team1 = data.team1.name.toLowerCase();
            if(team1.search(team1Search) != -1){
                found = true;
            }
        });
    }
    if(team2Search != undefined){
        matches.forEach(function(data){
            var team2 = data.team2.name.toLowerCase();
            if(team2.search(team2Search) != -1){
                found = true;
            }
        });
    }
    if(found == true)
        return true;
    if(teamSearch == undefined && team1Search == undefined && team2Search == undefined)
        return true;
}

查看使用路线提供的html-angular模板：

<div class="col-12">
  <h3 class="mypara pt-3">Please Checkmark one of the Years :</h3>
    <div class="row">
      <div class="col-4">
      <h3>2015<input type="checkbox" class="check ml-2" ng-model="isChecked2015"></h3></div>
      <div class="col-4"><h3>2016<input type="checkbox" class="check ml-2" ng-model="isChecked2016"></h3></div>
      <div class="col-4"><h3>2017<input type="checkbox" class="check ml-2" ng-model="isChecked2017"></h3></div>
      <div class="col-4 pb-5 pt-5">
          <label for="search">Search By Team</label>
          <input ng-model="teamSearch" id="search" class="form-control" placeholder="Search By Team/Date">        
      </div>
      <div class="col-4 pb-5 pt-5">
          <label for="search">Search By Team1</label>
          <input ng-model="team1Search.team1.name" id="search" class="form-control" placeholder="Search By Team1">        
      </div>
      <div class="col-4 pb-5 pt-5">
          <label for="search">Search By Team2</label>
          <input ng-model="team2Search.team2.name" id="search" class="form-control" placeholder="Search By Team2">        
      </div>
    </div>
</div>

<div style="display:none;" ng-if="isChecked2015==true && isChecked2016!=true && isChecked2017!=true">
  <div ng-init="vm.year = 2015; vm.loop = vm.data2015;"></div>
</div>
<div style="display:none;" ng-if="isChecked2016==true && isChecked2015!=true && isChecked2017!=true">
    <div ng-init="vm.year = 2016; vm.loop = vm.data2016;"></div>
</div>
<div style="display:none;" ng-if="isChecked2017==true && isChecked2016!=true && isChecked2015!=true">
  <div ng-init="vm.year = 2017; vm.loop = vm.data2017;"></div>
</div>
<div style="display:none;" ng-if="isChecked2015==true && isChecked2016==true && isChecked2017!=true">
  <div ng-init="vm.year = [2015, 2016]; vm.loop = vm.data2015.concat(vm.data2016);"></div>
</div>
<div style="display:none;" ng-if="isChecked2015!=true && isChecked2016==true && isChecked2017==true">
  <div ng-init="vm.year = [2016, 2017]; vm.loop = vm.data2016.concat(vm.data2017);"></div>
</div>
<div style="display:none;" ng-if="isChecked2015==true && isChecked2016!=true && isChecked2017==true">
  <div ng-init="vm.year = [2015, 2017]; vm.loop = vm.data2015.concat(vm.data2017);"></div>
</div>
<div style="display:none;" ng-if="isChecked2015==true && isChecked2016==true && isChecked2017==true || isChecked2015!=true && isChecked2016!=true && isChecked2017!=true">
  <div ng-init="vm.year = [2015, 2016, 2017]; vm.loop = vm.totaldata;"></div>
</div>
<h3 class="mypara">Displaying for Year : {{vm.year}}</h3>
<div class="table-responsive" ng-repeat="data in vm.loop | filter: teamSearch" class="col-12 text-center" ng-show="isChecked2015 || isChecked2016 || isChecked2017 || isChecked2015!=true && isChecked2016!=true && isChecked2017!=true">    
    <table class="table table-sm table-dark opac" ng-if="vm.eachDateCheck(data.matches, vm.year) && vm.checkTeams(data.matches, teamSearch, team1Search.team1.name, team2Search.team2.name)">
      <thead>
        <tr>
        <th scope="col" class="p-3">Date</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="vm.eachDateCheck(data.matches, vm.year) && vm.checkTeams(data.matches, teamSearch, team1Search.team1.name, team2Search.team2.name)"><div class="alert alert-info" role="alert"><h3>{{data.name}}</h3></div>
        <tbody>
          <tr ng-repeat="matchday in data.matches | filter:teamSearch | filter:team1Search | filter:team2Search" ng-if="vm.rowDateCheck(matchday.date.slice(0,4), vm.year)">
          <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>

根据这一行中使用的逻辑：

<table class="table table-sm table-dark opac" ng-if="vm.eachDateCheck(data.matches, vm.year) && vm.checkTeams(data.matches, teamSearch, team1Search.team1.name, team2Search.team2.name)">

它将检查表行中是否存在年份和团队名称，如果存在则返回true并且如果不存在将返回false，尽管代码中的所有内容都是正确的，那么为什么这些空白表行会出现？我该如何解决这个问题？

AngularJS删除空白行

0 个答案: