角纳克-重复和形状性能

Question

我正在编写一个非常基本的页面，以跟踪特定客户的内部工作和项目。我希望允许用户编辑显示在页面上的当前条目。我编写了这个部分，它基本上重复了数据库中的所有条目。然后，单击显示编辑表单，该表单是根据重复值自动填充的.效果很好，但现在我关心的是表演。对于每个条目来说，这是一堆额外的代码，如果理论上我有数百条这样的代码，那么这似乎是一种非常低效率的方法。

到目前为止，我的情况如下：

    <div class="task">
        <label class="checkbox" ng-repeat="banner in banners | filter : filterBanners">
            <input  type="checkbox" value="{{banner.ID}}" ng-click="editClicked=!editClicked;"/> 
                <span >{{banner.JOBNAME}} | {{banner.JOBNUMBER}} | {{banner.FILEPATH}} | <a target="_blank" href="{{banner.LINK}}">Link To Project</a> | {{banner.TAGS}} </span>
            <a ng-click="deleteBanners(banner.ID)" class="pull-right"><i class="glyphicon glyphicon-trash"></i></a>
                <form ng-init="editClicked=false; " ng-if="editClicked" id="newBannerForm" class="add-banner" enter="editBanners(nameInput,numberInput,linkInput,pathInput,tagsInput)" j-validate>
                    <div class="form-actions">
                        <div class="input-group">
                                <input type="text" class="form-control" name="jobname" ng-model="nameInput" placeholder="{{banner.JOBNAME}}" ng-focus="editClicked"/>
                                <input type="text" class="form-control" name="jobnumber" ng-model="numberInput" placeholder="{{banner.JOBNUMBER}}" ng-focus="editClicked"/>
                                <input type="text" class="form-control" name="link" ng-model="linkInput" placeholder="{{banner.LINK}}" ng-focus="editClicked"/>
                                <input type="text" class="form-control" name="path" ng-model="pathInput" placeholder="{{banner.PATH}}" ng-focus="editClicked"/>
                                <input type="text" class="form-control" name="tags" ng-model="tagsInput" placeholder="{{banner.TAGS}}" ng-focus="editClicked"/>
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-plus"></i>&nbsp;Submit</button>
                            </div>
                        </div>
                    </div>
                </form>
        </label>
    </div>

有谁知道有什么更好的表演方式吗？我在考虑设置一个指令，然后用

  scope.$apply(attrs.enter);

执行我传递值给的函数。但不能完全确定这是否比我所拥有的好。

Answer 1

10,000的速度似乎有点慢，但1000的速度还是相当快的。看这个。

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    <script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
    <style>
      .task{
        border:solid 1px #aaa;
        padding:2em;
      }
    </style>
  </head>

  <body ng-controller="main">
    <input class='form-control' placeholder='Search' ng-model="search.text" />
    <div class="task" ng-repeat="banner in banners | filter : search.text">
      <label class="checkbox">
        <input type="checkbox" value="{{banner.ID}}" ng-click="editClicked=!editClicked;" />
        <span>{{banner.JOBNAME}} | {{banner.JOBNUMBER}} | {{banner.FILEPATH}} |           <a target="_blank" href="{{banner.LINK}}">Link To Project</a>
 | {{banner.TAGS}} </span>
        <a ng-click="deleteBanners(banner.ID)" class="pull-right">
          <i class="glyphicon glyphicon-trash"></i>
        </a>
        <form ng-init="editClicked=false; " ng-if="editClicked" id="newBannerForm" class="add-banner" enter="editBanners(nameInput,numberInput,linkInput,pathInput,tagsInput)" j-validate="">
          <div class="form-actions">
            <div class="input-group">
              <input type="text" class="form-control" name="jobname" ng-model="nameInput" value="{{banner.JOBNAME}}" placeholder="{{banner.JOBNAME}}" ng-focus="editClicked" />
              <input type="text" class="form-control" name="jobnumber" ng-model="numberInput" placeholder="Job Number" ng-focus="editClicked" />
              <input type="text" class="form-control" name="link" ng-model="linkInput" placeholder="Link" ng-focus="editClicked" />
              <input type="text" class="form-control" name="path" ng-model="pathInput" placeholder="Path" ng-focus="editClicked" />
              <input type="text" class="form-control" name="tags" ng-model="tagsInput" placeholder="Tags" ng-focus="editClicked" />
              <div class="input-group-btn">
                <button class="btn btn-default" type="submit">
                  <i class="glyphicon glyphicon-plus"></i>
 Submit</button>
              </div>
            </div>
          </div>
        </form>
      </label>
    </div>
    <script>
      var app = angular.module('app', []);
      app.controller('main', function($scope){
        $scope.banners = [];
        var obj = {
          ID: null,
          JOBNUMBER: '1234',
          JOBNAME: 'doit',
          FILEPATH: '/path/to/file.ext',
          LINK: 'http://www.google.com/',
          TAGS: ['one', 'two', 'three']
        };
        for(var i=0; i < 10000; i++){
          var o = angular.copy(obj);
          o.ID = i;
          o.JOBNUMBER = i;
          $scope.banners.push(o);
        }
      });
    </script>
  </body>

</html>

我建议您实现分页或延迟加载(例如，每次100-500 )。这应该保持客户端体验的快速性。