我们正在使用为银行构建的Angular应用程序来应对性能问题。

不幸的是，显示代码片段违反了合同。 无论如何，我可以描述正在进行的一些主要问题，我希望可以推荐最佳实践。

应用结构：

• 本质上，是一个巨大的多表单页面。
• 每种形式都是其自己的部分，带有嵌套的控制器和大约3层深的部分。
• 在json对象的集合上重复ng相同的形式。
• 每个表单都绑定到重复的对象/模型。
• 我们应该支持该页面上1-200个表格中的任何一个。

如果您看一下时间线。 我们在jQuery parse html方法，jQuery重新计算stye方法，GC事件（垃圾收集）上花费了大量时间。 我想将这些最小化应该可以加快速度。 它们都是Angular生命周期的一部分，但是可能有更好的方法来避免它们。 这是探查器的一些屏幕截图：

最终，随着重复表单的数量超过5，该应用程序变得迟钝。每种表单相对于其他表单都没有关系。 我们试图不监视表单之间的任何共享属性。

我想按状态（在线优先，离线后继）和字母顺序订购朋友列表。 我设法得到的是：

• 在线首创/字母顺序颠倒
• 或离线优先/按字母顺序排列

这是暴露我的问题的朋克

嗨，我有一个文本区域的字符数。 我的问题是它不计算空格或换行符。 我如何做到这一点？

   <div class="controls">

   <textarea rows="4" cols="50"  maxlength="1500" data-ng-minLength="1" data-ng  
    model="createprofilefields.description" required highlight-on-
    error></textarea>

    <br />

<!--counter-->
  <span class="form-help">{{1500-createprofilefields.description.length}}         
   Characters</span>

    </div>

我的嵌套ng-repeat循环需要第二个$ index。 我应该在哪里放？

AngularJS网站说

可以使用ngInit为这些属性创建别名。 这个 例如，在嵌套ngRepeats时可能会很有用。

<div ng-repeat="person in persons track by $index">
    <div ng-repeat="something in array track by $index2"> <!-- where to init this and how to manage it?-->

如果我再次使用$ index，它似乎可以工作，但是我不确定这是否正确？我敢肯定有一种简单而正确的方法，我只是找不到一个例子。

谢谢

我正在尝试将结果集限制为固定数量。 我可以将ng-repeat和ng-repeat一起使用，但这会限制项目，无论它们当前的可见性如何，并从DOM中删除项目。 我想限制所有可见项目，同时将所有内容保留在DOM中。

这是我当前的代码。 我的目标是即使ng-repeat包含500个项目，列表中也始终显示不超过50个项目。

<div ng-repeat="item in items | limitTo: 50">
  <div ng-show="item.visible">
    <p>item.id</p>
  </div>
</div>

最初将限制为50个项目，但是如果我过滤列表（通过修改某些项目上的item.visible），该列表将永远不会显示50-500范围内的项目，而是显示少于50个项目。 限制ng-repeat以便仅将可见项目计入限制的正确方法是什么？

我有一个模板，仅当当前项目与上一个项目具有某些不同的字段时，才想在其中生成一些HTML。 如何在ng-repeat中访问上一个项目？

我正在使用ng-repeat生成一堆单选按钮，然后在选择其中一个时尝试更新模型。 这似乎不起作用。

当无线电输入经过硬编码而不是由ng-repeat生成时，相同的标记就可以正常工作。

这有效：

<input type="radio" ng-model="lunch" value="chicken" name="lunch">
<input type="radio" ng-model="lunch" value="beef" name="lunch">
<input type="radio" ng-model="lunch" value="fish" name="lunch">  
{{lunch}}

这不是：

<input type="radio" ng-model="lunch" ng-repeat="m in meat" value="m" name="lunch">    
{{lunch}}

看到jsfiddle在这里显示两者：[http://jsfiddle.net/mark_up/A2qCS/1/]

任何帮助，将不胜感激。

谢谢

如何在ng-repeat指令开始而不是从零开始的地方指定索引？

我有一组结果，我只需要指定一个起始值即可，它不同于零。

假设我有以下用户：

$scope.users = {
  "2": {
    email: 'john@gmail.com',
    name: 'John'
  },
  "3": {
    email: 'elisa@gmail.com',
    name: 'Elisa'
  }
}

我想创建一个具有以下选项的ui-select2：

<option value="3">Elisa</option>
<option value="2">John</option>

换句话说，用户应按名称排序。

我使用ui-select2语法尝试了以下操作，但不起作用：

<option ng-repeat="(user_id, user) in users | orderBy:'user.name'" 
        value="{{ user.id }}">
  {{ user.name }}
</option>

这里有现场示例。

我想念什么？

请不要建议使用ui-select2的解决方案，因为我使用的是ui-select2，它与ng-options不兼容。

我正在尝试显示元素的二叉树，并使用ng-include递归地进行处理。

2755206259073873876992和ng-repeat="item in item.left"和有什么不一样？在此示例中，它的行为完全相同，但是我在项目中使用了类似的代码，因此它的行为有所不同。 我想是因为角度范围。也许我不应该使用ng-if，请向我解释如何做得更好。

pane.html是：

<div ng-if="!isArray(item.left)">
    <div ng-repeat="item in [item.left]" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.left)">
    {{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
    <div ng-repeat="item in [item.right]" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.right)">
    {{item.right[0]}}
</div>

<div ng-if="!isArray(item.left)">
    <div ng-init = "item = item.left" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.left)">
    {{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
    <div ng-init="item = item.right" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.right)">
    {{item.right[0]}}
</div>

控制器是：

var app = angular.module('mycontrollers', []);

app.controller('MainCtrl', function ($scope) {

    $scope.tree = {
        left: {
            left: ["leftleft"],
            right: {
                left: ["leftrightleft"],
                right: ["leftrightright"]
            }
        },
        right: {
            left: ["rightleft"],
            right: ["rightright"]
        }
    };

    $scope.isArray = function (item) {
        return Array.isArray(item);
    }
});

编辑：首先，我遇到一个问题，即指令ng-repeat的优先级高于ng-if。 我试图将它们合并，但失败了。 IMO奇怪的是ng-repeat主导ng-if。

我有一个阵列$first。

我想要项目是否为ngRepeat的$first之一，以添加css类in。

用角度可以做到吗？ 通常，我该如何处理Ajs中的布尔值？

<div ng-repeat="item in items">
   <div class='' > {{item.title}}</div>
</div>

我是Angular JS的新手，我正在尝试创建一个自定义指令，该指令将如下使用：

<div linkedlist listcolumns="{{cashAccountsColumns}}"></div>

Corrps。 控制器将是：

$scope.cashAccountsColumns = [
  {"field": "description", "title": "Description"},
  {"field": "owner", "title":"Owner"},
  {"field": "currentBalance", "title":"Current Balance" }
];

指令代码为：

return {
      restrict : 'EA',
      transclude : false,
      templateUrl : 'html/linkedlist.html',
      scope: {
         listcolumns: "@"
      },
      link : function(scope, element, attrs) {
      }
}

模板是：

<table class="box-table" width="100%">
  <thead>
    <tr>
      <th scope="col" ng-repeat="column in listcolumns">
        {{column.title}}
      </th>
    </tr>
  </thead>
</table>

但这是行不通的。 我没有在屏幕上得到column.title的值，而是将以下行添加到DOM：

<th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th>

如果我有一个以对象作为属性值的复杂对象，如何按嵌套的属性之一进行过滤？

可以使用OOB ng-repeat过滤器完成此操作吗？

数据

{
  Name: 'John Smith',
  Manager: {
     id: 123,
     Name: 'Bill Lumburg'
  }
}

ngRepeat

<li ng-repeat="e in emps | filter:Manager.Name">{{ e.Name }}</li>

当前，我的应用程序有一个控制器，该控制器接收一个JSON文件，然后使用“ ng-repeat”遍历它们。 这一切都很好，但是我还有一条指令需要遍历同一JSON文件。 这造成了一个问题，因为我无法在一页上两次请求相同的JSON文件（我也不想这样做，因为它效率不高）。 如果更改一个JSON文件之一的文件名，指令和控制器都可以请求并遍历JSON数据。

我想知道的是：将由控制器的JSON请求形成的数组传递到指令中的最佳方法是什么？ 通过控制器访问数组后，如何将其传递到指令中并进行迭代？

控制者

appControllers.controller('dummyCtrl', function ($scope, $http) {
   $http.get('locations/locations.json').success(function(data) {
      $scope.locations = data;
   });
});

的HTML

<ul class="list">
   <li ng-repeat="location in locations">
      <a href="#">{{location.id}}. {{location.name}}</a>
   </li>
</ul>
<map></map> //executes a js library

指令（当我使用locations.json以外的文件名时有效，因为我已经请求过一次

.directive('map', function($http) {
   return {
     restrict: 'E',
     replace: true,
     template: '<div></div>',
     link: function(scope, element, attrs) {

$http.get('locations/locations.json').success(function(data) {
   angular.forEach(data.locations, function(location, key){
     //do something
   });
});

如何隐藏ng-repeat的第一个元素？

<div ng-repeat="item in items" ng-hide="true">
    <div>{{ item.value }}</div>
</div>

这是因为整个ng-repeat块都被隐藏了，但是如何只隐藏项目中的第一个项目呢？ 我想使用更突出的html / etc完全不同地显示它，因此将其包含在该数据列表中很有用。

我正在尝试使用条件将项目分组为ng-repeat。

一个示例条件是将所有元素分组为同一小时。

数据：

[
    {name: 'AAA', time: '12:05'},
    {name: 'BBB', time: '12:10'},
    {name: 'CCC', time: '13:20'},
    {name: 'DDD', time: '13:30'},
    {name: 'EEE', time: '13:40'},
    ...
]

“时间”字段实际上是一个时间戳记（1399372207），但是使用准确的时间，示例输出将更易于理解。

我正在使用ng-repeat列出这些项目：

<div ng-repeat="r in data| orderBy:sort:direction">
   <p>{{r.name}}</p>
</div>

还尝试了：

<div ng-repeat-start="r in data| orderBy:sort:direction"></div>
    <p>{{r.name}}</p>
<div ng-repeat-end></div>

有效输出为：

<div class="group-class">
    <div><p>AAA</p></div>
    <div><p>BBB</p></div>
</div>
<div class="group-class">
    <div><p>CCC</p></div>
    <div><p>DDD</p></div>
    <div><p>EEE</p></div>
</div>

如果没有一个简单的解决方案，我的最后一个选择是将数据分组，然后将其分配给ng-repeat中使用的作用域变量。

有什么想法吗？

我像电话教程一样在angularJS中使用ng-repeat和filter，但我想在页面中突出显示搜索结果。 使用基本的jQuery，我只需在输入的键上解析页面，但是我试图以有角度的方式进行操作。 有任何想法吗 ？

我的代码：

<input id="search" type="text" placeholder="Recherche DCI" ng-model="search_query" autofocus>
<tr ng-repeat="dci in dcis | filter:search_query">
            <td class='marque'>{{dci.marque}} ®</td>
            <td class="dci">{{dci.dci}}</td>
 </tr>

我找不到能帮助我解决这个简单问题的东西在角。 比较时，所有答案都与导航栏相关正在针对位置路径进行。

我使用list和row构建了一个动态表。当我单击一行时，我试图为该行分配一个css类（选中），以突出显示该行已被用户选中的事实，并从以前的版本中删除了ul 突出显示的行。

我缺少绑定在所选行和CSS类分配之间的方法。

我在每个row（ul）上应用了ng-click="setSelected()"但是我缺少function内部应用更改的逻辑。

我的代码-Plunk

我的代码：

var webApp = angular.module('webApp', []);

//controllers
webApp.controller ('VotesCtrl', function ($scope, Votes) {
    $scope.votes  = Votes;
    $scope.statuses = ["Approved","Pending","Trash","Spam"];

    $scope.setSelected = function() {
       console.log("show");

    }
});

//services
webApp.factory('Votes', [function() {

    //temporary repository till integration with DB this will be translated into restful get query
    var votes = [
        {
            id: '1',
            created: 1381583344653,
            updated: '222212',
            ratingID: '3',
            rate: 5,
            ip: '198.168.0.0',
            status: 'Pending',
        },
        {
            id: '111',
            created: 1381583344653,
            updated: '222212',
            ratingID: '4',
            rate: 5,
            ip: '198.168.0.1',
            status: 'Spam'    

        },
        {
            id: '2',
            created: 1382387322693,
            updated: '222212',
            ratingID: '3',
            rate: 1,
            ip: '198.168.0.2',
            status: 'Approved'

        },
        {

            id: '4',
            created: 1382387322693,
            updated: '222212',
            ratingID: '3',
            rate: 1,
            ip: '198.168.0.3',
            status: 'Spam'
        }
    ];

    return votes;
}]);

我的HTML：

  <body ng-controller='VotesCtrl'>
    <div>
    <ul>
        <li class="created">
            <a>CREATED</a>
        </li>
        <li class="ip">
            <b>IP ADDRESS</b>
        </li>
        <li class="status">
            <b>STATUS</b>
        </li>
    </ul>
    <ul ng-repeat="vote in votes" ng-click="setSelected()">
        <li  class="created">
          {{vote.created|date}}
        </li>
        <li class="ip">
            {{vote.ip}}
        </li>
        <li class="status">
            {{vote.status}}
        </li>
    </ul>
   </div>
   </body>

我的CSS（仅选定的类）：

.selected {
  background-color: red;
}

是否可以过滤对象数组，以使属性的值可以是几个值（或条件）中的任一个而无需编写自定义过滤器

这类似于此问题-Angular.js ng-repeat：filter by single field

但是代替

<div ng-repeat="product in products | filter: { color: 'red' }">

有可能做这样的事情吗

<div ng-repeat="product in products | filter: { color: 'red'||'blue' }">

对于以下示例数据-

$scope.products = [
   { id: 1, name: 'test', color: 'red' },
   { id: 2, name: 'bob', color: 'blue' }
   /*... etc... */
];

我尝试失败

<div ng-repeat="product in products | filter: { color: ('red'||'blue') }">

我有一组对象，并且正在使用ng-repeat对其进行迭代，这很容易。 该数组如下所示：

$scope.steps = [
    {companyName: true},
    {businessType: true},
    {physicalAddress: true}
];

我的stepName属性看起来像：

<div ng-repeat="step in steps"> ... </div>

在每个迭代中，stepName等于一个对象，如预期的那样。 无论如何，是否可以访问键和'companyName'对象的值？ 这样我可以做这样的事情：

<div ng-repeat="(stepName, isComplete) in steps"> ... </div>

其中stepName == 'companyName'和isComplete ==true。我已经尝试做这件事，但stepName总是最终只是步骤对象的索引（这很有意义）。 我只是想弄清楚是否还有另一种方式来编写ng-repeat语法，以便可以获取键和值。

感谢您的任何想法/建议。 非常感激。

PS。 我当前的解决方法是在控制器中执行此操作：

$scope.stepNames = [];
angular.forEach($scope.steps, function(isComplete, stepName){
     $scope.stepNames.push({stepName: stepName, isComplete: isComplete});
});

然后进行迭代，但是最好在视图中完成所有操作