Javascript 角度重复和形态表现_Javascript_Angularjs

Javascript 角度重复和形态表现

javascript angularjs

Javascript 角度重复和形态表现,javascript,angularjs,Javascript,Angularjs,我正在写一个非常基本的页面来跟踪特定客户的内部工作和项目。我想允许用户编辑页面上显示的当前条目。我写了这个部分，它基本上重复了数据库中的所有条目。然后，单击显示编辑表单，该表单根据重复值自动填充。效果很好，但现在我关心的是性能。每个条目都有大量的额外代码，如果理论上我有数百个这样的条目，那么这似乎是一种非常低效的方法以下是我目前掌握的情况： <div class="task"> <label class="checkbox" ng-repeat="ba

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

以下是我目前掌握的情况：

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

执行我将值传递给的函数。但不完全确定这比我的好

10000的速度似乎有点慢，但1000的速度仍然相当快


.任务{
边框：实心1px#aaa；
填料：2米；
}
{{banner.JOBNAME}}{{banner.JOBNUMBER}}{{banner.FILEPATH}}}}
|{{banner.TAGS}}
提交
var-app=angular.module（'app'，[]）；
应用控制器（'main'，函数（$scope）{
$scope.banners=[]；
var obj={
ID:null，
工作编号：“1234”，
作业名称：“doit”，
文件路径：'/path/to/file.ext'，
链接：'http://www.google.com/',
标签：['1'，'2'，'3']
};
对于（变量i=0；i<10000；i++）{
var o=角度复制（obj）；
o、 ID=i；
o、 JOBNUMBER=i；
$scope.banner.push（o）；
}
});

我建议您实现分页或延迟加载（例如，一次100-500）。这将使客户端体验保持快速。

哇，这比我想象的性能好得多。也从未使用过plnkr，谢谢你给我看！只是为了好玩，有没有更有效的方法？或者这真的是最好的方法吗？Angular

ng repeat

已经非常优化了。我认为你做得对

ng if

是一个好主意（over

ng show/ng hide

），因为它内部的所有内容都不会被处理，直到它的计算结果为true，在这种情况下，一次可能只有一个或两个项目。您可以删除

ng if

语句中的代码部分，并通过对话框处理更新。这将消除每次处理

ng repeat

数组时（例如在加载、搜索等过程中）对

ng if

语句求值的需要；这可能并不重要。太好了，谢谢！我还在学习，很抱歉问了这么多愚蠢的问题。在我看来，表现是非常重要的，所以最好学会正确而不是错误。这绝对是个有道理的问题。

  scope.$apply(attrs.enter);

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