我有一系列产品,我正在重复使用ng-repeat和我正在使用
<div ng-repeat="product in products | filter:by_colour">
用颜色过滤这些产品.过滤器正在运行,但如果产品名称/描述等包含颜色,则在应用过滤器后产品仍然存在.
如何将过滤器设置为仅应用于数组的颜色字段而不是每个字段？
我正在定义一个自定义过滤器:
<div class="idea item" ng-repeat="item in items" isoatom>
<div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2">
....
</div>
</div>
正如您所看到的那样,使用过滤器的ng-repeat嵌套在另一个ng-repeat中
过滤器的定义如下:
myapp.filter('range', function() {
return function(input, min, max) {
min = parseInt(min); //Make string input int
max = parseInt(max);
for (var i=min; i<max; i++)
input.push(i);
return input;
};
});
我越来越:
错误:不允许在转发器中重复.Repeater:在item.comments中发表评论| 范围:1:2 ngRepeatAction @ https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an
有没有办法重复定义的次数而不是总是迭代一个数组？
例如,下面我希望列表项显示5次,假设$scope.number等于5,另外增加数量,以便每个列表项增量如1,2,3,4,5
期望的结果:
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
我有一个ng-repeat像这样的简单循环:
<li ng-repeat='task in tasks'>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
控制器中有一个功能$scope.removeTask(taskID).
据我所知,Angular将首先渲染视图并用{{task.id}}数字替换插值,然后,在click事件中,将评估ng-click字符串.
在这种情况下ng-click,完全得到预期,即:ng-click="removeTask(5)".但是......它没有做任何事情.
当然,我可以编写一个代码来task.id从$tasks数组甚至DOM中获取,但这似乎不像Angular方式.
那么,如何ng-click在ng-repeat循环内向指令添加动态内容呢？
我想做的事情如下:
<div ng-controller="TestCtrl">
<div ng-repeat="(k,v) in items | filter:hasSecurityId">
{{k}} {{v.pos}}
</div>
</div>
AngularJs部分:
function TestCtrl($scope)
{
$scope.items = {
'A2F0C7':{'secId':'12345', 'pos':'a20'},
'C8B3D1':{'pos':'b10'}
};
$scope.hasSecurityId = function(k,v)
{
return v.hasOwnProperty('secId');
}
}
但不知何故,它向我展示了所有项目.如何过滤(键,值)？
我有一组显示特定数字的图块,具体取决于用户选择的选项.我现在想通过显示的任何数字来实现排序.
下面的代码显示了我是如何实现它的(通过在父卡范围内获取/设置值).现在,因为orderBy函数接受一个字符串,我试图在名为curOptionValue的卡片范围中设置一个变量并按此排序,但它似乎不起作用.
那么问题就变成了,如何创建自定义排序功能？
<div ng-controller="aggViewport" >
<div class="btn-group" >
<button ng-click="setOption(opt.name)" ng-repeat="opt in optList" class="btn active">{{opt.name}}</button>
</div>
<div id="container" iso-grid width="500px" height="500px">
<div ng-repeat="card in cards" class="item {{card.class}}" ng-controller="aggCardController">
<table width="100%">
<tr>
<td align="center">
<h4>{{card.name}}</h4>
</td>
</tr>
<tr>
<td align="center"><h2>{{getOption()}}</h2></td>
</tr>
</table>
</div>
</div>
和控制器:
module.controller('aggViewport',['$scope','$location',function($scope,$location) {
$scope.cards = [
{name: card1, values: {opt1: 9, opt2: 10}},
{name: card1, values: {opt1: 9, opt2: 10}}
];
$scope.option = "opt1";
$scope.setOption = function(val){
$scope.option = val;
}
}]);
module.controller('aggCardController',['$scope',function($scope){
$scope.getOption = function(){ …我正在寻找正确的模式,每3列注入一个bootstrap行类.我需要这个,因为cols没有固定的高度(我不想修复它),所以它打破了我的设计!
这是我的代码:
<div ng-repeat="product in products">
<div ng-if="$index % 3 == 0" class="row">
<div class="col-sm-4" >
...
</div>
</div>
</div>
但它只在每行显示一个产品.我想要的最终结果是:
<div class="row">
<div class="col-sm4"> ... </div>
<div class="col-sm4"> ... </div>
<div class="col-sm4"> ... </div>
</div>
<div class="row">
<div class="col-sm4"> ... </div>
<div class="col-sm4"> ... </div>
<div class="col-sm4"> ... </div>
</div>
我只能用ng-repeat模式(没有指令或控制器)来实现这个目的吗？本文档介绍了NG-重复启动和NG-重复-结束,但我无法弄清楚如何使用它是这种使用情况!我觉得这是我们经常在bootstrap模板中使用的东西!？谢谢
我是AngularJS的新手,我正在构建一个小概念概念车租用列表应用程序,它可以提取一些JSON并通过ng-repeat显示各种数据,并带有几个过滤器:
<article data-ng-repeat="result in results | filter:search" class="result">
<header><h3>{{result.carType.name}}, {{result.carDetails.doors}} door, £{{result.price.value}} - {{ result.company.name }}</h3></header>
<ul class="result-features">
<li>{{result.carDetails.hireDuration}} day hire</li>
<li data-ng-show="result.carDetails.airCon">Air conditioning</li>
<li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li>
<li data-ng-show="result.carDetails.theftProtection">Theft Protection</li>
</ul>
</article>
<h2>Filters</h2>
<h4>Doors:</h4>
<select data-ng-model="search.carDetails">
<option value="">All</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="9">9</option>
</select>
<h4>Provider:</h4>
Atlas Choice <input type="checkbox" data-ng-model="search.company" ng-true-value="Atlas Choice" ng-false-value="" value="Atlas Choice" /><br>
Holiday Autos <input type="checkbox" data-ng-model="search.company" ng-true-value="Holiday Autos" ng-false-value="" value="Holiday Autos" /><br>
Avis <input type="checkbox" data-ng-model="search.company" ng-true-value="Avis" ng-false-value="" value="Avis" /><br>
现在我想在我的控制器中创建一个自定义过滤器,它可以遍历ng-repeat中的项目,只返回符合特定条件的项目 - 例如,我可能会根据哪个'provider'复选框创建一个值数组检查,然后评估每个ng-repeat项目.我只是无法弄清楚我是怎么做的,但就语法而言 - …
我有一个ng-repeat打印列表项.我想编写一个自定义过滤器,以便只有条件为真时才会打印列表项.
我似乎有错误的结构,因为似乎变量没有传递给过滤器.
的index.php
<div ng-show="userDetails.username" class="nav">
<p>Menu</p>
<li ng-repeat="menuItem in menu | matchAccessLevel:$rootScope.userDetails.accessLevel:menuItem.minAccess | orderBy:'position' ">
<a ng-href="/angular-app/app/{{menuItem.id}}">{{menuItem.name}}</a>
</li>
</div>
app.js
userApp.filter('matchAccessLevel', function() {
return function( item, userAccessLevel, minAccessLevel ) {
if( userAccessLevel >= minAccessLevel ) {
return item;
}
}
});
我正在尝试使用条件将项目分组为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'},
...
]
'time'字段实际上是一个时间戳(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中使用的范围变量.
有什么想法吗？