角ng重複和表單性能

我正在寫一個非常基本的頁面，以跟蹤特定客戶端的內部工作和項目。我想讓用戶編輯當前顯示在頁面上的條目。我寫了這個部分，它基本上重複了數據庫中的所有條目。然後，單擊時，顯示編輯表單，該表單根據重複值自動填充。效果很好，但現在我擔心表演。對於每個條目來說，這是一大堆額外的代碼，如果我理論上有數百條這樣的代碼，那麼這樣做似乎是一種非常低效的方式。角ng重複和表單性能

這是我到目前爲止有：

<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);

來執行我傳遞值的函數。但不完全確定這比我所擁有的更好。

來源

2014-09-25 jorblume

在10,000處似乎有點慢，但在1000處仍然非常快。 See this plnkr。

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

    <head> 
    <link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /> 
    <script data-require="[email protected]*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script> 
    <script data-require="[email protected]" 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）。這應該讓客戶端體驗感覺活潑。

來源

2014-09-25 23:20:43 Trevor

哇，這是比我想象的更多的表現。也從來沒有用過plnkr，謝謝你給我看！ – jorblume 2014-09-25 23:26:04

只爲咯咯地笑有沒有更有效的方法來做到這一點？或者這真的是最好的方式？ – jorblume 2014-09-25 23:28:38

Angular'ng-repeat'已經相當優化了。我認爲你做對了。 'ng-if'是一個好主意（通過'ng-show/ng-hide'），因爲它裏面的所有東西都不會被處理，直到它被評估爲true，在這種情況下，它可能只會是一兩個項目一次。您可以刪除'ng-if'語句中的部分代碼，並通過對話框處理更新。這將消除在每次處理ng-repeat數組時（例如在加載，搜索等期間）評估「ng-if」語句的需要;這可能並不重要。 – Trevor 2014-09-25 23:34:37

角ng重複和表單性能

回答

相關問題