Questions tagged «angularjs-ng-repeat»

ngRepeat指令对集合中的每个项目实例化一次模板。每个模板实例都有其自己的作用域，其中给定的循环变量设置为当前集合项，`$ index`设置为项索引或键。

16
如何使ng-repeat过滤出重复的结果
我正在运行一个简单ng-repeat的JSON文件，并希望获取类别名称。大约有100个对象，每个对象都属于一个类别-但是只有大约6个类别。 我当前的代码是这样的： <select ng-model="orderProp" > <option ng-repeat="place in places" value="{{place.category}}">{{place.category}}</option> </select> 输出是100个不同的选项，大部分重复。如何使用Angular检查是否{{place.category}}已经存在，如果已经存在则不创建选项？ 编辑：在我的javascript中$scope.places = JSON data，只是为了澄清
6
AngularJS-如何获取ngRepeat过滤结果参考
我正在使用带有过滤器的ng-repeat指令，如下所示： ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4" 我可以看到渲染结果很好；现在我想在控制器上对该结果运行一些逻辑。问题是如何获取结果项引用？ 更新： 只是为了澄清一下：我正在尝试创建自动完成功能，我输入以下内容： <input id="queryInput" ng-model="query" type="text" size="30" placeholder="Enter query"> 然后过滤的结果： <ul> <li ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4">{{item.name}}</li> </ul> 现在，我想浏览结果并选择其中一项。
4
角度变化延迟
我有一个输入，可以根据更改过滤ng-repeat列表。重复数据包含大量数据，并且需要花费几秒钟来过滤所有内容。我希望它们在开始过滤过程之前有0.5秒的延迟。产生延迟的正确方法是什么？ 输入值 <input ng-model="xyz" ng-change="FilterByName()" /> 重复 <div ng-repeat"foo in bar"> <p>{{foo.bar}}</p> </div> 过滤功能 $scope.FilterByName = function () { //Filtering Stuff Here }); 谢谢
8
ng模型，ng重复和输入的难度
我正在尝试允许用户使用ngRepeat和编辑项目列表ngModel。（请参阅此小提琴。）但是，我尝试过的两种方法都导致了奇怪的行为：一种方法没有更新模型，另一种方法使每个keydown的表单模糊。 我在这里做错什么了吗？这不是受支持的用例吗？ 这是小提琴中的代码，为方便起见进行了复制： <html ng-app> <head> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body ng-init="names = ['Sam', 'Harry', 'Sally']"> <h1>Fun with Fields and ngModel</h1> <p>names: {{names}}</p> <h3>Binding to each element directly:</h3> <div ng-repeat="name in names"> Value: {{name}} <input ng-model="name"> </div> <p class="muted">The binding does not appear to be working: the value in the …
18
角ng-repeat每3或4列添加引导行
我正在寻找正确的模式以每3列注入一个引导行类。我需要这个是因为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> …
4
AngularJS if-then-else表达式中的构造
我可以在angularjs表达式中以某种方式使用if-then-else构造（三元运算符），例如，我有必须返回bool值的函数$ scope.isExists（item）。我想要这样的东西 <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构造的可能性我很有趣。谢谢。
19
计算AngularJS ng-repeat中重复元素的总和
以下脚本使用来显示购物车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>
3
了解ngRepeat的“跟踪依据”表达
我很难理解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>
5
AngularJS：从模型数组中拼接模型元素时，不会更新ng-repeat列表
我有两个控制器，并使用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指令将跨度添加到k2plugin指令的模板。单击该范围时，将使用删除共享数组中的右侧元素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 …
2
在ng-repeat中单击ng时显示隐藏的div
我正在使用Angular.js应用程序，该应用程序可以过滤医疗程序的json文件。当使用ng-click单击（在同一页面上）过程名称时，我想显示每个过程的详细信息。这是我到目前为止的内容，.procedure-details div设置为显示：无： <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> 我在角度上很新。有什么建议？
2
AngularJS中具有ng-repeat范围的指令隔离范围
我有一个带有隔离范围的指令（以便我可以在其他地方重用该指令），当我将此指令与一起使用时ng-repeat，它将无法正常工作。 我已经阅读了有关此主题的所有文档和Stack Overflow的答案，并了解了这些问题。我相信我避免了所有常见的陷阱。 因此，我知道我的代码由于ng-repeat指令创建的作用域而失败。我自己的指令创建了一个隔离范围，并与父作用域中的对象进行了双向数据绑定。我的指令将为该绑定变量分配一个新的对象值，并且在不使用我的指令的情况下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创建从父作用域继承的原型作用域，而使用我的指令的isolate-scope？ 为什么2000我的指令中的优先级不起作用？ 使用Batarang，是否可以知道正在使用哪种类型的示波器？
3
具有自定义过滤功能的AngularJS多重过滤器
我正在尝试使用多个过滤器+自定义过滤器功能过滤列表。 最初工作的jsfiddle示例是http://jsfiddle.net/ed9A2/1/，但是现在我想更改年龄过滤的方式。 我想添加一个自定义过滤器，以使其年龄基于两个输入值min_age和max_age（在年龄之间）进行过滤。 在研究文档之后。我发现有人有类似的问题，用户Mark Rajcok回答了http://docs.angularjs.org/api/ng.filter:filter#comment-648569667看起来不错，应该可以工作。但是我在将其应用于我的代码时遇到了问题，这主要是因为我还有其他多个过滤器。 我对AngularJS非常了解:( 我尝试过但不起作用的小提琴在这里http://jsfiddle.net/ed9A2/20/ 我的无效代码的副本粘贴在这里 视图 <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> …
3
angular ng-repeat如果匹配表达式则跳过项目
我正在寻找一种基本上告诉angular如果与表达式匹配的话跳过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尝试
2
角JS过滤器不等于
似乎是一个非常基本的问题，但我无法正确使用语法。 <li class="list-group-item" ng-repeat="question in newSection.Questions | filter:Id != '-1'; " ng-mouseenter="hover = true" ng-mouseleave="hover = false"> <div href="#" editable-text="question.Text">{{question.Text}}</div> </li> 我想要的是显示id不是-1的所有问题。我究竟做错了什么。谢谢！
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.