CODEWITHSUNDEEP
javascriptangularjs
jorblume
jorblume

Reputation: 607

Angular ng-repeat and form performance

I'm writing a very basic page to keep track of internal work and projects for a specific client. I want to allow users to edit current entries that display on the page. I wrote this partial, which basically repeats all the entries in the database. Then, on click, reveals the edit form, which is auto-populated based on the repeat values. Works great, but now I'm concerned about performance. It's a ton of extra code for each entry, and if I theoretically had hundreds of these, it seems like a very inefficient way to do this.

Here's what I have so far:

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

Does anyone know of a more performant way to do this? I was thinking of setting up a directive, and using 

  scope.$apply(attrs.enter);

to carry out functions which I pass values to. But not entirely sure this is any better than what I have.

Upvotes: 1

Views: 422

Answers (1)

Trevor
Trevor

Reputation: 13437

At 10,000 is seems a little slow, but at 1,000 it is still pretty fast. See this plnkr.

<!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="[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>

I would recommend you implement pagination or lazy loading (e.g. 100-500 at a time). This should keep the client-side experience feeling snappy.

Upvotes: 2

Related Questions