Question

我对AngularJS中的重复内容有疑问。

我从数据库下载的数据：

请在下面查看我的桌子的外观，而不是应该的样子。

    {"records":[
{"id":"6","view_id":"111111111","month":"1","year":"2017","organic_search_visit":"6930","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"2","year":"2017","organic_search_visit":"10633","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"3","year":"2017","organic_search_visit":"11282","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"4","year":"2017","organic_search_visit":"8079","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"5","year":"2017","organic_search_visit":"6245","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"6","year":"2017","organic_search_visit":"5745","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"7","year":"2017","organic_search_visit":"5897","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"8","year":"2017","organic_search_visit":"5025","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"9","year":"2017","organic_search_visit":"5024","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"10","year":"2017","organic_search_visit":"6494","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"11","year":"2017","organic_search_visit":"8083","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"12","year":"2017","organic_search_visit":"6019","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"1","year":"2018","organic_search_visit":"2450","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"2","year":"2018","organic_search_visit":"2050","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"3","year":"2018","organic_search_visit":"1993","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"4","year":"2018","organic_search_visit":"1299","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"5","year":"2018","organic_search_visit":"1394","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"6","year":"2018","organic_search_visit":"1481","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"7","year":"2018","organic_search_visit":"1329","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"8","year":"2018","organic_search_visit":"0","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"9","year":"2018","organic_search_visit":"0","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"10","year":"2018","organic_search_visit":"0","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"11","year":"2018","organic_search_visit":"0","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"12","year":"2018","organic_search_visit":"0","domain_name":"abc.pl","opis":"123"}
]}

我的code.html

       <table class="table">
           <thead>
             <tr>
               <td>ROK</td>
               <th>1</th>
               <th>2</th>
               <th>3</th>
               <th>4</th>
               <th>5</th>
               <th>6</th>
               <th>7</th>
               <th>8</th>
               <th>9</th>
               <th>10</th>
               <th>11</th>
               <th>12</th>
             </tr>
           </thead>
           <tr>
             <td><span>2017</span></td>
             <td ng-repeat="x in analytics"><span ng-if="x.year == '2017' ">{{ x.organic_search_visit }}</span></td>
           </tr>
           <tr>
            <td><span>2018</span></td>
             <td ng-repeat="x in analytics"><span ng-if="x.year == '2018' ">{{ x.organic_search_visit }}</span></td>
           </tr>
         </table>

查看：

Answer 1

看看我的代码。 ng-if标签应位于td标签中，而不是span标签中。在您的代码中，由于ng-if标记中放置了span，有些行没有内容。

var module = angular.module("myModule", []);

module.controller("myController", function($scope) {
	$scope.analytics = [
{"id":"6","view_id":"111111111","month":"1","year":"2017","organic_search_visit":"6930","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"2","year":"2017","organic_search_visit":"10633","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"3","year":"2017","organic_search_visit":"11282","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"4","year":"2017","organic_search_visit":"8079","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"5","year":"2017","organic_search_visit":"6245","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"6","year":"2017","organic_search_visit":"5745","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"7","year":"2017","organic_search_visit":"5897","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"8","year":"2017","organic_search_visit":"5025","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"9","year":"2017","organic_search_visit":"5024","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"10","year":"2017","organic_search_visit":"6494","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"11","year":"2017","organic_search_visit":"8083","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"12","year":"2017","organic_search_visit":"6019","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"1","year":"2018","organic_search_visit":"2450","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"2","year":"2018","organic_search_visit":"2050","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"3","year":"2018","organic_search_visit":"1993","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"4","year":"2018","organic_search_visit":"1299","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"5","year":"2018","organic_search_visit":"1394","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"6","year":"2018","organic_search_visit":"1481","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"7","year":"2018","organic_search_visit":"1329","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"8","year":"2018","organic_search_visit":"0","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"9","year":"2018","organic_search_visit":"0","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"10","year":"2018","organic_search_visit":"0","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"11","year":"2018","organic_search_visit":"0","domain_name":"abc.pl","opis":"123"},{"id":"6","view_id":"111111111","month":"12","year":"2018","organic_search_visit":"0","domain_name":"abc.pl","opis":"123"}
];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myModule">
  <div ng-controller="myController">
       <table class="table">
           <thead>
             <tr>
               <td>ROK</td>
               <th>1</th>
               <th>2</th>
               <th>3</th>
               <th>4</th>
               <th>5</th>
               <th>6</th>
               <th>7</th>
               <th>8</th>
               <th>9</th>
               <th>10</th>
               <th>11</th>
               <th>12</th>
             </tr>
           </thead>
           <tr>
             <td><span>2017</span></td>
             <td ng-if="x.year == '2017'" ng-repeat="x in analytics"><span>{{ x.organic_search_visit }}</span></td>
           </tr>
           <tr>
            <td><span>2018</span></td>
             <td ng-if="x.year == '2018'" ng-repeat="x in analytics"><span>{{ x.organic_search_visit }}</span></td>
           </tr>
         </table>
  </div>
</div>

数据显示不正确-ng-repeat

1 个答案: