我可以以某种方式在angularjs表达式中使用if-then-else构造(三元运算符),例如我有函数$ scope.isExists(item)必须返回bool值.我想要这样的东西,
<div ng-repeater="item in items">
<div>{{item.description}}</div>
<div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div>
</div>
我知道我可以使用返回字符串的函数,我很有兴趣在表达式中使用if-then-else构造.谢谢.
javascript if-statement ternary-operator angularjs angularjs-ng-repeat
我正在寻找正确的模式,每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模板中使用的东西!？谢谢
下面的脚本显示了使用的购物车ng-repeat.对于数组中的每个元素,它显示项目名称,其数量和小计(product.price * product.quantity).
计算重复元素总价的最简单方法是什么？
<table>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr ng-repeat="product in cart.products">
<td>{{product.name}}</td>
<td>{{product.quantity}}</td>
<td>{{product.price * product.quantity}} €</td>
</tr>
<tr>
<td></td>
<td>Total :</td>
<td></td> <!-- Here is the total value of my cart -->
</tr>
</table>
我有两个控制器,并使用app.factory函数在它们之间共享数据.
第一个控制器在单击链接时在模型数组(pluginsDisplayed)中添加一个小部件.小部件被推入阵列,此更改将反映到视图中(使用ng-repeat显示数组内容):
<div ng-repeat="pluginD in pluginsDisplayed">
<div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>
该小部件基于三个指令构建,k2plugin,remove和resize.remove指令将span添加到k2plugin指令的模板中.单击所述span时,将删除共享数组中的右元素Array.splice().共享阵列已正确更新,但更改未反映在视图中.但是,添加另一个元素后,在删除后,视图将正确刷新,并且不会显示先前删除的元素.
我错了什么？你能解释一下为什么这不起作用吗？有没有更好的方法来做我想用AngularJS做的事情？
这是我的index.html:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js">
</script>
<script src="main.js"></script>
</head>
<body>
<div ng-app="livePlugins">
<div ng-controller="pluginlistctrl">
<span>Add one of {{pluginList.length}} plugins</span>
<li ng-repeat="plugin in pluginList">
<span><a href="" ng-click="add()">{{plugin.name}}</a></span>
</li>
</div>
<div ng-controller="k2ctrl">
<div ng-repeat="pluginD in pluginsDisplayed">
<div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>
</div>
</div>
</body>
</html>
这是我的main.js:
var app = angular.module ("livePlugins",[]);
app.factory('Data', function () {
return {pluginsDisplayed: []};
});
app.controller ("pluginlistctrl", function ($scope, …angularjs angularjs-directive angularjs-scope angularjs-ng-repeat
我正在开发一个Angular.js应用程序,它可以过滤医疗程序的json文件.当使用ng-click单击(在同一页面上)过程的名称时,我想显示每个过程的详细信息.这是我到目前为止,.procedure-details div设置为display:none:
<ul class="procedures">
<li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp">
<h4><a href="#" ng-click="?">{{procedure.definition}}</a></h4>
<div class="procedure-details">
<p>Number of patient discharges: {{procedure.discharges}}</p>
<p>Average amount covered by Medicare: {{procedure.covered}}</p>
<p>Average total payments: {{procedure.payments}}</p>
</div>
</li>
</ul>
我很有新意义.有什么建议？
我很难理解如何通过 angularjs中的ng-repeat 的表达来跟踪轨迹.文档很稀缺:http://docs.angularjs.org/api/ng/directive/ngRepeat
你能解释这两个代码片段在数据绑定和其他相关方面的区别吗？
有: track by $index
<!--names is an array-->
<div ng-repeat="(key, value) in names track by $index">
<input ng-model="value[key]">
</div>
没有(相同的输出)
<!--names is an array-->
<div ng-repeat="(key, value) in names">
<input ng-model="value[key]">
</div>
我有一个带隔离范围的指令(这样我可以在其他地方重用该指令),当我使用这个指令时ng-repeat,它无法工作.
我已阅读有关此主题的所有文档和Stack Overflow答案,并了解问题.我相信我已经避免了所有常见的陷阱.
所以我理解我的代码因ng-repeat指令创建的范围而失败.我自己的指令创建了一个isolate-scope,并对父作用域中的对象进行双向数据绑定.我的指令将为这个绑定变量赋一个新的对象值,当我的指令没有使用时ng-repeat(父变量被正确更新),这种方法非常有效.但是,使用ng-repeat,赋值在ng-repeat作用域中创建一个新变量,而父变量看不到更改.所有这些都是基于我所读到的预期.
我还读到,当给定元素上有多个指令时,只创建一个范围.并且priority可以在每个指令中设置a 来定义指令的应用顺序; 指令按优先级排序,然后调用它们的编译函数(在http://docs.angularjs.org/guide/directive上搜索单词优先级).
所以我希望我可以使用优先级来确保我的指令首先运行并最终创建一个隔离范围,并且在ng-repeat运行时,它重新使用隔离范围而不是创建原型继承父范围的范围.该ng-repeat文档声明该指令以优先级运行1000.目前尚不清楚1是优先级更高还是优先级更低.当我1在我的指令中使用优先级时,它没有任何区别,所以我尝试了2000.但这会让事情变得更糟:我的双向绑定变成了undefined我的指令并没有显示任何东西.
我创造了一个小提示来展示我的问题.我已经priority在我的指令中注释掉了这个设置.我有一个名称对象列表和一个名为对象的指令name-row,它显示了名称对象中的名字和姓氏字段.单击显示的名称时,我希望它selected在主范围中设置变量.名称数组,selected变量name-row使用双向数据绑定传递给指令.
我知道如何通过调用主范围中的函数来使其工作.我也知道如果selected在另一个对象内部,并且我绑定到外部对象,事情就会起作用.但我现在对这些解决方案不感兴趣.
相反,我的问题是:
ng-repeat从创建prototypically从父范围继承的范围,而是把它用我的指令的分离,范围有多大？2000我的指令中的优先级不起作用？angularjs angularjs-directive angularjs-scope angularjs-ng-repeat
我试图使用多个过滤器+使用自定义过滤器功能过滤列表.
最初的工作jsfiddle示例是http://jsfiddle.net/ed9A2/1/,但现在我想改变年龄过滤方式.
我想添加自定义过滤器,这样的年龄就筛选基于这两个输入值MIN_AGE和MAX_AGE,(年龄之间).
在研究了doc之后.我发现人们有类似的问题和用户Mark Rajcok回答http://docs.angularjs.org/api/ng.filter:filter#comment-648569667看起来不错,应该可以正常工作.但我有问题将其应用到我的代码中,这主要是因为我有其他多个过滤器.
我对AngularJS很新:(
我试过而且不工作的小提琴就在这里http://jsfiddle.net/ed9A2/20/
我的NOT工作代码的复制粘贴在这里
视图
<div ng-app ng-controller="MainController">
<table class="fancyTable">
<tr>
<th>Player id</th>
<th>Player name</th>
<th>Age</th>
</tr>
<tr>
<td><input ng-model="player_id" /></td>
<td><input ng-model="player_name" /></td>
<td>
Min Age:<input ng-model="min_age" />
Max Age:<input ng-model="max_age" />
</td>
</tr>
<tr ng-repeat="player in players | filter:{id: player_id, name:player_name, age:ageFilter}">
<td>{{player.id}}</td>
<td>{{player.name}}</td>
<td>{{player.age}}</td>
</tr>
</table>
调节器
function MainController($scope) {
$scope.player_id = "";
$scope.player_name = "";
$scope.player_age = "";
$scope.min_age = 0; …我正在寻找一种基本上告诉角度来跳过ng-repeat中的项目的方法,如果它与表达式匹配,基本上continue;
在控制器中:
$scope.players = [{
name_key:'FirstPerson', first_name:'First', last_name:'Person'
}, {
name_key:'SecondPerson', first_name:'Second', last_name:'Person'
}]
现在在我的模板中,我想向每个人展示不匹配的内容name_key='FirstPerson'.我认为它必须是过滤器所以我设置了一个Plunkr玩它但没有运气.Plunkr尝试
这个问题在这里得到了部分解决:Angular.js ng-repeat跨越多个tr
然而,这实际上只是一个解决方案,它实际上并没有解决核心问题,即:如何在没有包装器的情况下跨多个元素使用ng-repeat？
例如,jquery.accordion要求你重复一个h3和div元素,怎么用ng-repeat做呢？