数据显示不正确 - ng-repeat
Data incorrectly displayed - ng-repeat
我对 AngularJS 中的重复内容有疑问。
我从数据库下载的数据:
看看下面我的 table 的样子,不是它应该的样子。
{"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>
查看:
看看我的代码。 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>
我对 AngularJS 中的重复内容有疑问。
我从数据库下载的数据:
看看下面我的 table 的样子,不是它应该的样子。
{"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>
查看:
看看我的代码。 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>