angularjs-ng-repeat

I have a controller that I wrote that I use in multiple places in my app with ng-include and ng-repeat , like this: <div ng-repeat="item in items" ng-include="'item.html'" ng-controller="ItemController" ></div> In the controller/template, I expect the item value to exist, and the whole thing is built around this idea. Now, though, I need to use the controller in a slightly different way, without the ng-repeat , but still need to be able to pass in an item . I saw ng-init and thought it could do what I needed, like this: <div ng-init="item = leftItem" ng-include="'item.html'" ng-controller=

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 property to bring up a button to tell the user to commit the changes. So far, so good. However, once the

I'm trying to get Angular to generate a CSS slider based on my data. I know that the data is there and am able to generate it for the buttons, but the code won't populate the ng-switch-when for some reason. When I inspect the code, I see this twice (which I know to be correct as I only have two items): <div ng-repeat="assignment in assignments" ng-animate="'animate'" class="ng-scope"> <!-- ngSwitchWhen: {{assignment.id}} --> </div> My actual code: <div ng-init="thisAssignment='one'"> <div class="btn-group assignments" style="display: block; text-align: center; margin-bottom: 10px"> <span ng

I'm somewhat new to angular, and i'm having problems with my json and ng-repeats. I have a list of "modules" and then lists of "weeks" within them: { "modules": { "module1": { "title":"name of module1", "description":"description of module1", "weeks":{"week1":{"title":"Week 01"} }, "module2": { "title":"name of module2", "description":"description of module2", "weeks":{"week2":{"title":"Week 02"},"week3":{"title":"Week 03"} } } } my final output is a table, and I can get the modules to repeat, but I'm having a hard time understanding what I'm doing wrong by getting the weeks to loop. Here is

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 It maybe solved quite elegantly, by using scrollTop property of div . I used two directives - one handles scroll position of

How do I implement progressive loading of content as you scroll down the page? Otherwise 1000 images would load at the same time. EpokK 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('DemoController', function($scope) { $scope.images = [1, 2, 3, 4, 5, 6, 7, 8]; $scope.loadMore = function() {