angularjs-ng-repeat

Let's say we have an array of people in the JSON format. Each entity has about 100 attributes. The standard approach of using ng-repeat: ... <tr> <th>Attribute1</th> <th>Attribute2</th> ... <th>AttributeN</th> </tr> ... <tr ng-repeat="obj in jsonArray"> <td>{{ obj.attr1 }}</td> <td>{{ obj.attr1 }}</td> ... <td>{{ obj.attrN }}</td> </tr> Which produces the following table: Attribute1 | Attribute2 | ... | AttributeN ------------------------------------------ value1.1 | value1.2 | ... | value1.N value2.1 | value2.2 | ... | value2.N ... valueN.1 | valueN.2 | ... | valueN.N Instead of this, I need:

I'm applying a greater than filter to a ng-repeat tag. I wrote the following custom filter function: $scope.priceRangeFilter = function (location) { return location.price >= $scope.minPrice; }; and I use it in the following HTML code: <div ng-repeat="m in map.markers | filter:priceRangeFilter"> What is the best way to trigger a refresh of the ng-repeat tag when $scope.minPrice is updated? It should be automatic. When $scope.minPrice is changed, the repeater will be automatically updated. function Ctrl($scope, $timeout) { $scope.map = [{ name: 'map1', price: 1 }, { name: 'map2', price: 2 }, {

Look at example: $scope.fields = [{ name: 'Email', dir : "abc" }, { name: 'List', dir : "ddd" }]; app.directive('abc', function () {}); app.directive('ddd', function () {}); <table class="table table-hover"> <tr ng-repeat="p in fields"> <input {{p.dir}} ngmodel="p" /> </tr> </table> How can I write code, that p.dir will dynamically convert to a directive ? My example: hhttp://jsbin.com/vejib/1/edit Khanh TO Try this directive: app.directive('dynamicDirective',function($compile){ return { restrict: 'A', replace: false, terminal: true, priority: 1000, link:function(scope,element,attrs){ element

I would like to perform a group by function inside of an ng-repeat Given the following data: var items = []; items.push({ id: 1, widgetId: 54, colorId: 45 }); items.push({ id: 2, widgetId: 54, colorId: 72 }); items.push({ id: 3, widgetId: 54, colorId: 29 }); items.push({ id: 4, widgetId: 55, colorId: 67 }); items.push({ id: 5, widgetId: 55, colorId: 29 }); items.push({ id: 6, widgetId: 56, colorId: 29 }); items.push({ id: 7, widgetId: 56, colorId: 72 }); items.push({ id: 8, widgetId: 57, colorId: 75 }); I would like an ng-repeat that results in the following presentation widgetId 54 colorId:

(simple plunkr demo here ) SUMMARY: There is a leak using ng-repeat after the 2nd wave iterating over an 'array' of custom objects like this : <div ng-repeat="d_sampleObject in mySampleObjects"> {{d_sampleObject.description}} </div> Memory profile reveals an extra 'd_sampleObject' left over and not de-referenced. More details (via a controller and an injected service) below. A simple demonstration also in the provided plunkr link. Any thoughts and help greatly appreciated in advance! NOTE: 'mySampleObjects' is an array of the following instances: ml.MySampleObject = function (id) { this.id =

Is it possible to use limitTo filter on a ngRepeat directive which is repeating the properties of an Object and not items in an Array. I am aware that the official documentation says that the input to limitTo needs to be an array or a string. But wondering if there's a way to get this to work. Here's a sample code: <li ng-repeat="(key, item) in phones_dict |orderBy:'-age'| limitTo:limit_items"></li> And $scope.phones_dict is an Object like { item_1: {name:"John", age: 24}, item_2: {name:"Jack", age: 23} } limitTo works only for strings and arrays, for object use own filter for example: myApp

I have an object that contains a mixture of numbers and text for values. I'd like to apply the numbers filter to the object's value when it's a number (obviously). But when it isn't a number, I'd be okay with it just spitting out the string. As is, applying | number to the value formats the numbers, but leaves the string values empty (afterall, they aren't numbers). I'm guessing it'll have to be a custom filter (which I have yet had a need to make). Is there a way to do it solely within the HTML when doing the ng-repeat ? <table> <tr ng-repeat="(metric, metricData) in data"> <td>{{metric}}</td

I have an ng-repeat li elements and I want to set a specific value for that li depending on whether a function returns true or false and I don't want to do it in the controller because I have dependency issues where it makes it Minimize or Maximize for ALL li elements but I want it to be for each individual li element. I tried using several things including the following without any luck. I am not sure what I am doing wrong but I would appreciate any input or any other way of doing this. object1 is from an ng-repeat that includes this li element. <li><a tabindex="-1" ng-click="setHidden

I'm trying to use ng-model "within" a ng-repeat directive that is itself nested in a ng-repeat directive. The following jsfiddle demonstrates my problem and my two attempts to solve it. http://jsfiddle.net/rskLy/4/ My Controller is defined as follows: var mod = angular.module('TestApp', []); mod.controller('TestCtrl', function ($scope) { var machine = {}; machine.noteMatrix = [ [false, false, false], [false, true, false], [false, false, false] ]; $scope.machine = machine; // ... }); 1. <table> <thead> <tr> <th>--</th> <th ng-repeat="no in machine.noteMatrix[0]">{{$index+1}}</th> </tr> </thead>

Trying to use a directive with an ng-show statement in it. Basically it checks against the value of a string which is the status_p1 property in my 'names' jsonarray: ng-show="name.status_p1==working" The directive is defined as this: app.directive('radioButton',function(){ return { restrict: 'E', replace: 'true', template: '<table border="2px">' + '<tr><td>{{name.name}}</td><td>Working</td><td><img src="http://www.iconshock.com/img_jpg/REALVISTA/general/jpg/256/cross_icon.jpg" alt="img1" id="imgworking" ng-show="name.status_p1!=working"><img src="http://png-1.findicons.com/files/icons/2198