angularjs-ng-repeat

AngularJS ng-repeat handle empty list case

橙三吉。 提交于 2019-11-26 11:45:28
问题 I thought this would be a very common thing, but I couldn\'t find how to handle it in AngularJS. Let\'s say I have a list of events and want to output them with AngularJS, then that\'s pretty easy: <ul> <li ng-repeat=\"event in events\">{{event.title}}</li> </ul> But how do I handle the case when the list is empty? I want to have a message box in place where the list is with something like \"No events\" or similar. The only thing that would come close is the ng-switch with events.length (how

AngularJS multiple filter with custom filter function

巧了我就是萌 提交于 2019-11-26 11:44:18
I am trying to filter the list with multiple filters + with a custom filter function. The original working jsfiddle example is http://jsfiddle.net/ed9A2/1/ but now I want to change the way age are being filter. I want to add a custom filter so that age it filter based on two input value which is min_age and max_age , (between age) . After looking into doc. I found people having similar questions and a user Mark Rajcok answer http://docs.angularjs.org/api/ng.filter:filter#comment-648569667 looks good and should be working. But I am having problem applying it into my codes which mainly seems to

How to improve performance of ngRepeat over a huge dataset (angular.js)?

故事扮演 提交于 2019-11-26 11:29:52
I have a huge dataset of several thousand rows with around 10 fields each, about 2MBs of data. I need to display it in the browser. Most straightforward approach (fetch data, put it into $scope , let ng-repeat="" do its job) works fine, but it freezes the browser for about half of a minute when it starts inserting nodes into DOM. How should I approach this problem? One option is to append rows to $scope incrementally and wait for ngRepeat to finish inserting one chunk into DOM before moving to the next one. But AFAIK ngRepeat does not report back when it finishes "repeating", so it's going to

Skip ng-repeat JSON ordering in Angular JS

末鹿安然 提交于 2019-11-26 11:11:39
问题 Does anybody know how I can SKIP JSON ordering altogether when I use ng-repeat (in a painless way probably)? For example, my source JSON looks something like this - { \"title\": \"Title\", \"description\": \"Description\", \"moreInfo\": \"Moreinformation\" } Once I use it in ng-repeat, it orders them alphabetically. Something like this - { \"description\": \"Description\", \"moreInfo\": \"Moreinformation\", \"title\": \"Title\" } My ng-repeat looks something like this - <div ng-repeat=\"(key

Angular ng-repeat add bootstrap row every 3 or 4 cols

谁都会走 提交于 2019-11-26 11:04:29
I'm looking for the right pattern to inject a bootstrap row class every each 3 columns. I need this because cols doesn't have a fixed hight (and I don't want to fix one), so it breaks my design ! Here is my code : <div ng-repeat="product in products"> <div ng-if="$index % 3 == 0" class="row"> <div class="col-sm-4" > ... </div> </div> </div> But it does only display one product in each row. What I want as final result is : <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>

ng-repeat filtering data by date range

喜夏-厌秋 提交于 2019-11-26 10:34:23
I'm trying to filter a list that contains a timestamp by typing a range of dates for example: JSFIDDLE html <div ng-app="tst"> <div ng-controller="MyController"> <table> <tr> <td>From: <input ng-model="query.date1" type="text" placeholder="" /> </td> <td>To: <input ng-model="query.date2" type="text" placeholder="" /> </td> </tr> <tr ng-repeat="order in orders |filter:query"> <td>{{order.date1 * 1000 | date:'dd-MM-yyyy'}}</td> <td>{{order.date2 * 1000 | date:'dd-MM-yyyy'}}</td> </tr> </table> </div> </div> javascript var nameSpace = angular.module('tst',[]); nameSpace.controller('MyController',

Understanding the ngRepeat &#39;track by&#39; expression

拥有回忆 提交于 2019-11-26 10:20:11
问题 I\'m having difficulties understanding how the track by expression of ng-repeat in angularjs works. The documentation is very scarce: http://docs.angularjs.org/api/ng/directive/ngRepeat Can you explain what the difference between those two snippets of code is in terms of databinding and other relevant aspects? with: track by $index <!--names is an array--> <div ng-repeat=\"(key, value) in names track by $index\"> <input ng-model=\"value[key]\"> </div> without (same output) <!--names is an

Angular orderBy number sorting as text in ng-repeat

我与影子孤独终老i 提交于 2019-11-26 09:47:17
问题 I have this data: [{\"id\":\"42\",\"firstname\":\"Sarah\",\"lastname\":\"Dilby\",\"age\":\"40\",\"cars\":\"Yaris\"}, {\"firstname\":\"Jason\",\"lastname\":\"Diry\",\"age\":\"5\",\"id\":\"5\"}, {\"id\":\"6\",\"firstname\":\"Bilson\",\"lastname\":\"Berby\",\"age\":\"1\",\"cars\":\"Tipo\"}] When I orderBy id or by age in an ng-repeat, it sorts the number as text. Since I can\'t find it written that this is an issue anywhere, I\'m guessing there\'s a problem with my code. I have created this

Access index of the parent ng-repeat from child ng-repeat

为君一笑 提交于 2019-11-26 09:15:39
问题 I want to use the index of the parent list (foos) as an argument to a function call in the child list (foos.bars). I found a post where someone recommends using $parent.$index, but $index is not a property of $parent . How can I access the index of the parent ng-repeat ? <div ng-repeat=\"f in foos\"> <div> <div ng-repeat=\"b in foos.bars\"> <a ng-click=\"addSomething($parent.$index)\">Add Something</a> </div> </div> </div> 回答1: My example code was correct and the issue was something else in

How To bind data using TypeScript Controller & Angular Js

大憨熊 提交于 2019-11-26 08:35:05
问题 I am Playing around with Type Script.I have convert my angular js controller to Type Script But i m facing problem in ng-repeater. (I have attached my controller code below:- class CustomCtrl{ public customer; public ticket; public services; public cust_File; public ticket_file; public service_file; static $inject = [\'$scope\', \'$http\', \'$templateCache\']; constructor ( private $http, private $templateCache ){} 回答1: I decided to add another answer describing more details how to create and