Question

我的角度应用程序中有大量JSON格式的数据，

[
  {"link": "https://stackoverflow.com"},
  {"link": "https://stackoverflow.com"},
  {"link": "id-aW783D"}, //This is a wrong data
  {"link": "https://stackoverflow.com"}
]

但正如您在JSON中看到的那样，第3个对象的值无效（NOT A LINK），

现在我需要将这些链接与a绑定在一起，但{"link": "id-aW783D"}中a无效，因为它不是有效的网址。

我添加了此代码以避免无效链接，但是使用此代码和大量数据，应用会花费大量时间加载。

for(i; i < $scope.data.length; i++){
 item = $scope.data[i];
 if (item.link.indexOf("https://")){
   item.ID = item.link;
 }
 else item.ID = '';
}

现在我的问题是，有没有其他方法可以做到这一点，比如ng-if？

＆＃13;

angular.module('myApp', []).controller('myCtrl', function($scope) {

  $scope.data = [
    {"link": "https://stackoverflow.com"},
    {"link": "https://stackoverflow.com"},
    {"link": "id-aW783D"},
    {"link": "https://stackoverflow.com"}
  ];
  var i = 0;
  for (i; i < $scope.data.length; i++) {
    item = $scope.data[i];
    if (item.link.indexOf("https://")) {
      item.ID = item.link;
    } else item.ID = '';
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul ng-repeat="j in data track by $index">
    <li ng-if="j.ID">{{j.link}}</li>
    <li ng-if="!j.ID"><a href="{{j.link}}">{{j.link}}</a></li>
  </ul>
</div>

＆＃13;

Answer 1

Js非常快。 Ng-if慢得多。以及渲染html标签

即。运行你的＆＃34; for＆＃34; 100万件物品：

var start = new Date();
for(i = 0; i < 1000000; i++){
 item = {link: '123321https://'};
 if (item.link.indexOf("https://")){
   item.ID = item.link;
 }
 else item.ID = '';
}
console.log(new Date() - start)

我的Chrome中需要139毫秒。

我doupt我的电脑将在页面上有1kk链接的页面中存活。

实际上你需要的是虚拟/无限滚动。

Answer 2

使用：ng-show="j.ID.indexOf('https') == 0"

Answer 3

如果要优化大量数据，则不希望将该过滤器逻辑卸载到模板。您可以尝试不同的逻辑，例如

var data_to_render = $scope.data.filter(function(item) {
    return item.link.indexOf("https://") === 0;
})

这将返回一个新数组，因为javascript 中的变异可能成本很高，并且避免分配给item变量X次。

除此之外，如果您只是显示数据列表，您可能希望尽可能限制显示的元素数量。过滤数组中数十万个项目并不是一个真正的问题，它会立即渲染，这会降低大多数设备的速度。

检查链接是否在angularjs中具有https：//

3 个答案: