angularjs-ng-repeat

ngRepeat:dupes - duplicates in repeater with nested ngrepeat and empty strings

ぃ、小莉子 提交于 2019-11-26 21:26:26
问题 I'm working with angular building a table of data which comes from a JSON API call. I'm having to use a nested ngRepeat however I'm seeing strange results where whole table rows are missing when the row has a couple empty strings. I can reproduce with the following plunk. http://plnkr.co/edit/VCzzzPzfgJ95HmC2f83P?p=preview <script> function MyController($scope){ $scope.test = {"rows":[ ["one","two","three"], ["one","two","three"], ["one","","three"], ["one","",""], ["","two",""], ["","",

angularjs - how to get in the controller the index of an item in a ng-repeat filter based on the value of one of its properties?

删除回忆录丶 提交于 2019-11-26 21:25:27
问题 I use a ng-repeat in my html file to display filtered items: <li ng-repeat="item in (filteredItems = (items | filter:query))"> {{ item.name }} </a> In the controller, I'd like to get the index of an item based on one of his property. Precision: I'd like to get the index in the filtered list and not in the whole list. Here for example, it will be the index of the item witch name is some_item_7 . var app = angular.module('myApp', []); app.controller('MyCtrl', ['$scope', function MyCtrl($scope)

Ng-click doesn't work inside ng-repeat

泪湿孤枕 提交于 2019-11-26 20:30:59
Ng-click doesn't work from inside ng-repeat. Outside it works. I've put a fiddle here <div ng-controller="MyCtrl"> <a ng-click="triggerTitle='This works!'">test</a> <h5>Please select trigger event: [{{triggerEvent}}] {{triggerTitle}}</h5> <ul class="dropdown-menu"> <li ng-repeat="e in events"> <a ng-click="triggerTitle=e.name; triggerEvent = e.action;">{{e.action}} - {{e.name}}</a> </li> </ul> </div> As Ven mentioned, ng-repeat does create a child scope for each item in the loop. The child scopes do have access to the parent scope's variables and methods through prototypal inheritance. The

Does ngRepeat exist in Angular 2?

霸气de小男生 提交于 2019-11-26 20:20:41
问题 I've read various issue tracker entries in relation to Angular 2 and its implementation of ng-repeat, but as it stands I haven't actually worked out if it actually exists yet. Is it possible to use ng-repeat in angular 2? 回答1: Angular 2.0 Release my-component.ts: import { Component } from 'angular2/core'; @Component({ selector: 'my-component', templateUrl: './my-component.html' }) export class MyComponent{ public values: number[] = [1, 2, 3]; } my-component.html: <div *ngFor='let value of

Angular ng-repeat with ng-form, accessing validation in controller

£可爱£侵袭症+ 提交于 2019-11-26 19:49:31
问题 I am trying to generate an editable list using ng-repeat . I want to remind the user to update any edits before moving on, so I am using ng-form to create "nested" forms on the fly because the documentation says I can then use validation on these dynamically created inputs. While that seems to work within the HTML, I don't see how to access those dynamically created forms and related validation fields in the controller. Specifically, when the user changes the input I use the form $dirty

AngularJS: ng-repeat list is not updated when a model element is spliced from the model array

别来无恙 提交于 2019-11-26 19:40:50
I have two controllers and share data between them with an app.factory function. The first controller adds a widget in the model array (pluginsDisplayed) when a link is clicked. The widget is pushed into the array and this change is reflected into the view (that uses ng-repeat to show the array content): <div ng-repeat="pluginD in pluginsDisplayed"> <div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div> </div> The widget is built upon three directives, k2plugin, remove and resize. The remove directive adds a span to the template of the k2plugin directive. When said span

How to retain scroll position of ng-repeat in AngularJS?

核能气质少年 提交于 2019-11-26 19:37:50
问题 DEMO List of objects is rendered using ng-repeat . Suppose that this list is very long and user is scrolling to the bottom to see some objects. While user is observing an object, a new item is added to the top of the list. This causes the observed object to change its position, i.e. the user suddenly sees something else at the same place of the observed object. How would you go about keeping the observed object at the same place when new items are added? PLAYGROUND HERE 回答1: It maybe solved

Progressive loading in ng-repeat for images, angular js

故事扮演 提交于 2019-11-26 19:25:08
问题 How do I implement progressive loading of content as you scroll down the page? Otherwise 1000 images would load at the same time. 回答1: Use infinite scrolling directive. ngInfiniteScroll DEMO HTML <div ng-app='myApp' ng-controller='DemoController'> <div infinite-scroll='loadMore()' infinite-scroll-distance='2'> <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'> </div> </div> JS var myApp = angular.module('myApp', ['infinite-scroll']); myApp.controller(

Directive isolate scope with ng-repeat scope in AngularJS

大城市里の小女人 提交于 2019-11-26 19:14:41
I have a directive with an isolate-scope (so that I can reuse the directive in other places), and when I use this directive with an ng-repeat , it fails to work. I have read all the documentation and Stack Overflow answers on this topic and understand the issues. I believe I have avoided all the usual gotchas. So I understand that my code fails because of the scope created by the ng-repeat directive. My own directive creates an isolate-scope and does a two-way data-binding to an object in the parent scope. My directive will assign a new object-value to this bound variable and this works

How to achieve pagination/table layout with Angular.js?

无人久伴 提交于 2019-11-26 18:56:10
问题 Let's say I receive an object literal with 15+ objects and I need to display them in a nice layout (not all in a row), what is the most efficient method for controlling when the line should break/page should end? Right now I'm using ng-repeat on table row's, and the result is a long thin table with one column. Edit for clarification. Could have objects within objects/more params. Here is my object: $scope.zones = [ {"name": "Zone 1", "activity": "1"}, {"name": "Zone 2", "activity": "1"}, {