我们正在使用为银行构建的Angular应用程序来应对性能问题。
不幸的是,显示代码片段违反了合同。 无论如何,我可以描述正在进行的一些主要问题,我希望可以推荐最佳实践。
应用结构:
如果您看一下时间线。 我们在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});
});
然后进行迭代,但是最好在视图中完成所有操作