How to Programming with Ng-repeat

angularjs,drop-down-menu,typescript,angular-ui-bootstrap,ng-repeat

As per my understanding, i provided this solution. I assume your result set will be, $scope.categoryDetails = [{ "categoryId": "001", "categoryTitle": "Video Games", "categoryTypeId": "1" }, { "categoryId": "003", "categoryTitle": "Tester'Data", "categoryTypeId": "2" }, { "categoryId": "005", "categoryTitle": "Master/Slave", "categoryTypeId": "3" }]; I convert it to lowercase and replace the...

Dynamically add UI Bootstrap dropdowns with ng-repeat

The issue is is-open="ctrl.isOpen". You are binding the opening of all of them with ctrl. It should be bound to something distinct for each repeat, i.e. something like is-open="item.isOpen"

ng-repeat (iterate) over complex json object in Angular

javascript,json,angularjs,ng-repeat

Assuming that you want to iterate over the sessions property, which is not an array but an object, you would have to iterate over the object's properties: <tr ng-repeat="(key, value) in data"> Here is an example: http://plnkr.co/edit/7AQF6k7hf2aZbWFmhVoX?p=preview relevant SO questions where the example is from: How can I iterate over...

ng-repeat with ng-click inside a directive

angularjs,angularjs-directive,angularjs-scope,ng-repeat,angularjs-ng-click

Your ng-click should be firing. I tried inputting your code into a fiddle, and modified it a bit: http://jsfiddle.net/vt52bauu/5/ You can try clicking the li-elements. I found a problem with this part of your code: ng-click="addToSelectedTags($index)" When you write something into the searchInput, it will filter your ng-repeat list. $index...

Angular error with ng-repeat

javascript,html,angularjs,ng-repeat

Looks like you need to change your markup a bit. Observe the following change... <ul ng-repeat="knoten in treeCtrl.treedata"> => <ul ng-repeat="knoten in treedata"> treedata is already defined on your $scope. No need to call treeCtrl. Likewise, this will be the same for text as well. Just place {{ text }}...

Need to repeat these objects within objects. Can I use $index with ng-repeat to make this happen?

angularjs,twitter-bootstrap,angularjs-ng-repeat,ng-repeat

You'll need to modify according to your iterative item, since each of those is relative to the item you're already iterating on. Altogether, what you have is just 3 for-each loops: <div ng-repeat="tab in tabs"> <a>{{ tab.title }}</a> <ul ng-repeat="section in tab.sections"> <li>{{ section.title }}</li> <ul ng-repeat="child in section.children"> <li>{{...

Nested NG Repeating

You can just use a nested ng-repeat where the nested one uses a variable of the first repeated element: <div ng-repeat="cat in categories"> {{ cat.name }} <ul>  <li ng-repeat="product in cat.products"> {{ product.name }} </li> </ul> </div So you can just change your...

AngularJS ng-repeat orderby doesn't work properly with greek words

javascript,angularjs,sorting,sql-order-by,ng-repeat

I understand your words are not sorted properly when their are accented. You could use a map to remove all the accents, and use a service like this one: .factory('diacritics',['diacriticsMap',function(diacriticsMap){//should inject diacriticsMap var removeDiacritics=function (str) { var letters = str.split(""); var newStr = ""; for(var i=0; i< letters.length; i++) {...

ng-Repeat returning undefined within $scope.$watchCollection

angularjs,ng-repeat,ng-init

Because $http.get is asynchronous so the line number 11 is executed before line number 5 so you get undefined there. By asynchronous i mean the execution doesn't wait for $http to return the promise, it just keeps executing to next lines....

AngularJS: How can I use $index in onclick

angularjs,indexing,ng-repeat

Do not use onclick as it will hardly behave nicely, instead you need to do it The Angular Way™ using the built-in ng-click and ng-checked <ul ng-repeat="person in persons"> <li ng-click="person.checked = true; showIndex($index)" ng-checked="person.checked"> <input type="radio" name="radio" ng-attr-id="radio{{$index}}">{{person.name}} </li> </ul> Note: If you do not want to edit the...

AngularJS ng-options from CakePHP Data

angularjs,cakephp,angularjs-ng-repeat,ng-repeat

Expounding on aleberguer's answer (which pointed out I needed a model) – I was still having a hard time having the correct options selected when staring my app. The whole "using select as and track by don't work together" thing... so this solution not only populated the options but enabled...

AngularJS directive templates ng-repeat funny substitution

javascript,angularjs,angularjs-directive,ng-repeat

The reason is you are updating the property on the same object reference (newItem) every time. So it updates all other items in the array because they all just point to the same object or in other words they are all same. You could instead get the copy of the...

Use AngularJS nested ng-repeat to create elements

javascript,arrays,angularjs,object,ng-repeat

You need to split you array in multiple arrays items = [[1,2], [3,4], [5,6], [7]]; And this new array you can bind to html <ul> <li ng-repeat="li in items"> <a href="" ng-repeat="atags in li">{{atags}}</a> </li> </ul> I've created you jsfiddle take a look: http://jsfiddle.net/k65wmddL/...

Get the images from the array object index that corresponds with the album name of what the user clicked

In you routing you would change the view album route to /Albums/:albumName and it's best to use a separate controller: .config(['$routeProvider', function($routeProvider) { $routeProvider. when('/home', { templateUrl: 'templates/feed.php', controller: 'flickrCtrl' }). when('/Albums', { templateUrl: 'templates/albums.php', controller: 'albumsCtrl' }). when('/Albums/:albumName', { templateUrl: 'templates/view-album.php', controller: 'viewAlbumsCtrl' }). otherwise({ redirectTo: '/home' }); }]);...

Bind ng-options to nested array within JSON object, within ng-repeat

json,angularjs,angularjs-ng-repeat,ng-repeat,ng-options

With Underscore.js you could prepare your data for ng-options. For me it looks pretty complicated. I would re-think if you could modify your data structure. I can't recommend a structure because I don't understand how the final result will look like. I've created two arrays one with the field names...

Angular display product info in modal after clicking an ng-repeat thumb

angularjs,modal-dialog,ng-repeat

The assignment that sets the selected product, inside your ng-repeat, actually creates the selectedProduct on a child scope. So it is likely inaccessible to your modal markup. You can avoid this by assigning the selected product to an object property: ng-click="store.selected = product" I also noticed that you defined isolated...

AngularJS - directive with a dynamic array of objects in form

angularjs,directive,ng-repeat,angularjs-ng-model

The fiddle has several mistakes: $scope.addItem is using the newItem before defining it. Remove the first line (probably a typo). The ng-model: It accepts expressions without {{...}}. So ng-model="items[{{item.itemNum}}].itemNum" would become ng-model="items[item.itemNum].itemNum" This is still wrong because the directive has isolated scope and the items variable is not visible. But...

AngularJS tabs with ng-repeat

angularjs,tabs,ng-repeat

There are multiple ways to approach this (one is dcodesmith's great answer). Use Controller As syntax If you wish to define view-only variables on your view (as you did in your example), use the Controller As syntax. One of the pros you'll get using this approach is direct access to...

Render multiple values, separated by line break, within a textarea

javascript,html,angularjs,textarea,ng-repeat

This does the trick: <div ng-if="field.multivalue == '1'"> <textarea rows="{{field.numberOfValues}}" cols="50"> {{field.theValues.join("
");}} </textarea> <button type="button" ng-click="addValue(field)">Add value </button> </div> The button runs the following function but is only there for testing: $scope.addValue = function(field) { field.theValues[(field.numberOfValues)] = "aaaa"; field.numberOfValues++; }; But for some reason I am getting an indention on...

Assigning unique value ID to ng-repeat

javascript,angularjs,angularjs-ng-repeat,ionic-framework,ng-repeat

Your ng-click should not use {{}} interpolation directive. <img ng-click="gallery.setCurrent($index)" ng-src="{{image}}"/> ng-click directive required Expression to evaluate upon click. (Event object is available as $event) but interpolation is not allowed it, because you have access to the scope by directly mentioning its name. Working Plunkr...

AngularJS ng-repeat directive with complex nested data structure and dynamic keys

Plunkr http://plnkr.co/edit/yMBnY4YgHZNwyw9vr0AR?p=preview <div class="country" ng-repeat="(countryIndex, country) in data"> <div>{{countryIndex}}</div> <div class="tourney" ng-repeat="(tournamentName, tournament) in country.tournaments"> <div >{{tournamentName}}</div> <div class="fixtures" ng-repeat="fixtures in tournament.fixtures"> <div ng-repeat="fixture in fixtures"> {{fixture}} </div> </div> </div> </div> ...

Multiple Iterations with AngularJS ng-repeat

arrays,angularjs,merge,angularjs-ng-repeat,ng-repeat

To achieve this you will have to make 2 updates. 2 ng-repeat Change structure HTML Code <div class="form-group-content"> <div class="form-col-secondary" ng-repeat="block in blocks"> <ul class="list-checkboxes"> <li ng-repeat="checkbox in block"> <input type="checkbox{{$index + 1}}"/> </li> </ul> </div> </div> JS Code $scope.blocks = [ ['1','2','3'], ['4','5'] ]; Here is a plunker for...

have two objects in ng-repeat mixed/merged

Is this what you are trying to achieve? var arr1 = [ { "some": "thing", "lol": "asd", "rotfl": "id321ddk", "hello": "world000" }, { "some": "thing2", "lol": "asd2", "rotfl": "oddddk2", "hello": "wwwworld2" }, { "some": "thing3", "lol": "asd3", "rotfl": "idkkk3", "hello": "worldd" } ]; var arr2 = [ { "id": 1,...

Unexpected outcome of ng-repeat

As I mentioned in my comment: The problem here is that JS Object keys get sorted alphabetically by default To avoid this from happening you can use a filter. I updated your jsfiddle using a toArray filter. myApp.filter('toArray', function () { return function (obj) { console.log(obj) if (!(obj instanceof Object))...

How to not repeat child but bind parent with ng-repeat in AngularJS

javascript,angularjs,multidimensional-array,angularjs-ng-repeat,ng-repeat

Update your code <div>{{itemName}}</div> with <div>{{itemName[$index]}}</div> ...

AngularJs “ng-repeat-start” with table

This should do the trick. See the code on my plunker.

Angular custom filter doesnt work on server

javascript,angularjs,angularjs-ng-repeat,ng-repeat,angularjs-filter

I don't understand why you are passing scope to fileter. This is not a good practice. Try below code. HTML <li ng-repeat="task in tasks | taskPriority:this.fSPriorites | filter:taskname as ukupno track by $index"> <input class="edit_task" ng-blur="editTask(task.id, task.task)" ng-model="task.task" value="{{ task.task }}" type="text"> </li> Filter angular.module('TaskFilter', []).filter('taskPriority', function() { return function(task,...

Angularjs make invisible accordion if subelement are filtered

angularjs,filter,accordion,visibility,ng-repeat

Thanks for the solution! Here how i have handled it: <accordion-group ng-repeat="category in categories" ng-show="(category.resources | filter:searchSingoloCampo).length>0"> In this way, i handle the visibility of the "master" accordion when the subset of element are filtered! Thank you very much...

Angular - Data Returned But ng-repeat Not Displaying It

When you use this in your callback function it doesn't refer to your controller. So you'd have to do something like this: function DocManCtrl($http) { var self = this; $http.get('http://localhost:3000/documents').success(function (data) { self.documents = data; }); } ...

Unable to load data using ng-repeat

You have to use a ng-repeat in order to make it work. Copy the following lines in your html, it will give you a good example of a ng-repeat usage. You should see your projects in a table. <table class="table"> <tr ng-repeat="project in projects"> <td>{{ project.ProjectName }}</td> <td>{{ project.ProjectCode }}</td>...

Why doesn't AngularJS want to list array items if a value repeats?

html,angularjs,binding,radio-button,ng-repeat

For this case, you want track by $index http://jsfiddle.net/2uyxu7ha/1/ explanation from docs: https://docs.angularjs.org/error/ngRepeat/dupes...

Binding radio buttons in an ng-repeat with angular

So it turns out that the problem was coming from the spans. I changed them to labels and it worked. Here is the code: <div ng-repeat="question in questionnaire"> <div class="btn-group col-xs-offset-1 col-xs-2 col-sm-2" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="question{{$index}}" ng-model="formData[$index]" value="false"> No </label> <label class="btn btn-primary"> <input type="radio" name="question{{$index}}"...

AngularJS ng-repeat creating three empty rows whien populating table & ng-repeat not repeating

javascript,arrays,json,angularjs,ng-repeat

Looking at the data you have coming out of the API, commitsArray should be an object with 4 properties, pagelen, page, next, and values. commitsArray.values is an array of commits. So it appears, what you are doing is iterating over the 4 properties of commitsArray, and trying to treat each...

ng-repeat except value 2

angularjs,conditional,ng-repeat

use ngIf because the ngIf differs from ngShow and ngHide in that ngIf completely removes and recreates the element in the DOM rather than changing its visibility via the display css property. <div ng-repeat="element in data.arrayElement" ng-if="element.val !== 2"> ...

ng-repeat not bind ng-model array of objects

angularjs,angularjs-directive,angularjs-ng-repeat,ng-repeat

use ng-model <input ng-model="item.price" ng-disabled="!item.editMode" type="text"/> Demo: Fiddle ng-value is not used for 2 way binding, it is used for select/input-radio elements...

adding directives to a page using ng-repeat

I forked the fiddle and worked out a solution using a directive I called bind-compiled-html: http://jsfiddle.net/hiebj/Lbusqf26/ Directive code: function bindCompiledHtml($compile) { return { restrict: 'A', link: function($scope, $element, $attrs) { var html = $scope.$eval($attrs.bindCompiledHtml), toCompile = angular.element(html); $element.append($compile(toCompile)($scope)); } }; } Usage: <div ng-repeat="directive in directiveHtmlList" bind-compiled-html="directive.directiveHtml"> </div> This solution...

Fetching and storing data from form fields (email, password) without user clicking a button using Angular, Javascript

javascript,jquery,angularjs,angularjs-directive,ng-repeat

You should consider, that email addresses can be prefixes of each other - or at least that most of the regular expressions checking for validity of an email address will already allow "[email protected]" and not wait for the complete ".com". Besides that, from a user perspective I would like it...

protractor click specific element in repeater by binding

javascript,testing,protractor,ng-repeat,end-to-end

There are multiple ways to locate the desired element, though I would chain element.all() and element() and use by.xpath() locator strategy: var a = element.all(by.repeater("app in userApps")).element(by.xpath(".//a[strong = 'appName1']")); a.click(); Or, using filter(): element.all(by.repeater("app in userApps")).filter(function (elm) { return elm.evaluate("app.displayName").then(function (displayName) { return displayName === "appName1"; }); }).then(function (elms) {...

Angularjs filters when used in combination with each other

javascript,angularjs,filter,ng-repeat,ng-show

The next filter will be applied to the result of another filter. This is called "chaining". EDIT There's no optimization, the filter execution gets the subset from the previous filter and then applies its filter logic. If you want optimization, you should consider implementing a custom filter that fits your...

With angular, how do i call the result of a custom filter in a ng-show?

You would inject $filter into your controller, make a function and bind your ng-show to that: How to use a filter in a controller? $scope.checkIsNow = function(item){ $filter('isNow')(item); return true|false; }; ng-show="checkIsNow(schedules)" ...

How can I render this irregular table with ng-repeat?

html,angularjs,table,angularjs-ng-repeat,ng-repeat

I'd suggest you to take use of tbody tag so that we need to apply to ng-repeat tag twice, that would do the trick for you. Makrup <table class="table table-bordered"> <thead></thead> <tbody ng-repeat="teacher in teachers"> <tr ng-repeat="student in teacher.student"> <td ng-if="$first" rowspan="{{teacher.student.length}}">{{teacher.teacher}}</td> <td>{{student.name}}</td> <td>{{student.project}}</td> </tr> </tbody> <tfoot></tfoot> </table> Demo...

Directives inside ng-repeat to create a new structure with AngularJS

arrays,json,angularjs,ng-repeat

I tried you requirement with ng-change directive in the input tag and kept one button to generate your end array when you click that button. Take a look at the code, <html ng-app="myApp"> <head> <script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-controller="myController"> <div ng-show='selectedAlg'> <div...

how to make first element in ng-repeat

javascript,json,angularjs,nested,ng-repeat

You can use orderBy, with an expression. If you had a JSON object similar to this one.... $scope.itemsWithOrder = [{ "name": "Owen", "order": 1 }, { "name": "Dave", "order": 3 }, { "name": "Ken", "order": 2 }, { "name": "John", "order": 4 }]; You could then use the order property...

AngularJS - Display complex JSON data with a single ng-repeat

Controller $scope.serieslist = data.records; $scope.flatbooklist = []; angular.forEach($scope.serieslist, function (series) { angular.forEach(series.book, function (book) { $scope.flatbooklist.push({seriesname: series.name, seriesid: series.seriesid, bookname: book.name, bookid: book.bookid, bookimage: book.image}); }); }); HTML <ul ng-repeat="book in flatbooklist"> <li> <div>{{book.seriesname}}</div> <div>{{book.bookname}}</div> </li> </ul> ...

How to update view angularjs from data server (api/nodejs/mongodb) by click

angularjs,node.js,mongodb,express,ng-repeat

check out $watch and $apply $watch will watch for a change and call $apply with a button function MyController($scope) { $scope.myVar = 1; $scope.$watch('myVar', function() { alert('hey, myVar has changed!'); }); $scope.changeValueButton = function() { $scope.myVar = 2; // This will trigger $watch expression to kick in }; $scope.updateButton =...

Calling a function (eg. Date) inside ng-repeat

angularjs,ionic,ng-repeat

you can user date filter form angular. See doc. <td>{{doc.updateTime | date}}</td>...

add class to a specific ng-repeat item and stay on that item

I have solved my own problem as follow: When the app goes to the background I manually insert an item to the ng-repeat. this is only visible for the specific user. New messages will be added below this and so the user can see where he was and which messages...

AngularJS ng-repeat is creating three empty rows when filling table with JSON array

javascript,arrays,json,angularjs,ng-repeat

Either chose angular or jquery but not both. What you're trying to do in jquery can, and should be done the Angular way if you're in an angular project. I'm totally confused by your title because you say ng-repeat but you're not using an ng-repeat, you're using a forloop and...

Number of objects in a ng-repeat that is filtered [duplicate]

javascript,angularjs,angularjs-ng-repeat,ng-repeat,angularjs-ng-model

If you need it outside of your <tr> tag, I would do it like this: <tr ng-click="openModal(device['device_id'], device)" ng-repeat="device in filteredResults = (devices | filter:searchText | orderBy:predicate:reverse)"> {{filteredResults.length}} devices were found ...

Angular ng-bind-html inside a nested ng-repeat

angularjs,ng-repeat,ng-bind-html

Use $sce, also don't forget to inject it into controller JS $scope.trustAsHtml = $sce.trustAsHtml Then in HTML <div class="row" ng-repeat="recipe in recipes"> <h1 class='title'> {{ recipe.title }} </h1> <div class="col-md-5"> <div class="list-group"> <div class="list-title">Ingredients</div> <p class="list-group-item" ng-repeat="item in recipe.ingredients" ng-bind-html="trustAsHtml(item)"></p> </div> </div> </div> ...

Angular ng-repeat once

javascript,json,angularjs,ng-repeat

You can use a custom filter like such: <div ng-repeat="d in Resources | unique: 'airportResources.departureTerminal'"> <div class="center"> Terminal {{d.airportResources.departureTerminal}} </div> </div> And as an added bonus you don't have to write the custom filter yourself. It is part of a companion library called Angular-UI. I have implemented the solution for...

trying to display json data with angularjs ng-repeat not working

I looked at your plunker seems like you need to: add angular script wire the app and the controller your variable in the repeater is wrong, I change it take a look to this fixed plunker: http://plnkr.co/edit/TAjnUCMOBxQTC6lNJL8j?p=preview $scope.clickButton = function() { $http.get(url).success(function(returnValue) { alert(JSON.stringify(returnValue.carrier)); $scope.carriers = returnValue.carrier; }); } ...

Improve performance ng-repeat list 750 elements

angularjs,performance,ng-repeat

I think i found the solution to my own problem googling various types of workarounds i found this Angular Virtual Scroll An awesome directive that manage the concept of virtual scroll directly on ng-repeat loops of angular, that way the view only renders a few items while its scrolling it...

can't center align text when using ng-repeat

angularjs,ionic,ng-repeat

Your problem is ui-sref tag, it add "item-content" class to your auto generated ion items, this class adds padding: 16px 49px 16px 16px; to your elements. If you remove the ui-sref, your generated ion-items will be centered.

ng-repeat dynamic variable name

javascript,json,angularjs,ng-repeat,ionic

You could use ng-repeats built-in $index. (Documentation here: https://docs.angularjs.org/api/ng/directive/ngRepeat) So it would look like this: <div id="collapse_{{ $index }}" class="panel-collapse collapse in"> Which would create: <div id="collapse_0" class="panel-collapse collapse in"> <div id="collapse_1" class="panel-collapse collapse in"> Etcetera. For opening the first div by default I think you can use ng-class like...

Cannot use ng-repeat with a JSON from ajax call

Take a look JSFiddle I downloaded the json you posted because i coudn't access to the url in the code. angular.module('nightbcApp', []) .factory('EventService', function($http, $q) { return { Todos: function() { var defer = $q.defer(); $http.get("http://localhost/td.json") .success(function(data){ defer.resolve(data); }) .error(function(response){ defer.reject(response); }); return defer.promise; } }; }) .controller('EventsController', function($scope, EventService)...

How to look up items with id for one controller from another controller in AngularJS

angularjs,controller,ng-repeat

Sharing data between controllers is best achieved via services/factories, an alternative is to use scope inheritance. 1. Factory/Service angular.module('yourModule').factory('itemService', itemService); function itemService() { var items = [{id:1, desc:'desc1'},{id:2, desc:'desc2'}...]; return { findItemById: findItemById } function findItemById(id) { //logic to find item by id } } Inject this factory in your...

AngularJS - Filter out single object in nested data structure

angularjs,filter,nested,ng-repeat

I used nested forEach in the controller to filter out and assign the book object to a scope variable. HTML <div>{{selectedbook.name}}</div> Controller dnleoApp.controller('BookCtrl', function ($scope, $routeParams) { $scope.mybookid = $routeParams.bookid; $scope.myseriesid = $routeParams.seriesid; $scope.serieslist = data.records; var keepGoing=true; angular.forEach($scope.serieslist, function(series){ if(keepGoing) { if(series.seriesid == $scope.myseriesid){ angular.forEach(series.book, function(book){ if(book.bookid ==...

build a form using multiple ng repeats how to proccess the data? angular js

angularjs,angularjs-ng-repeat,ng-repeat,ng-submit

I understand the urge to use ng-repeat once you discover what it's capable of. But there is a lot more to angular that makes things such as this issue much simpler. You might want to explore ngOptions directive (https://docs.angularjs.org/api/ng/directive/ngOptions) or the select tag (https://docs.angularjs.org/api/ng/directive/select). If these are not what you're...

$compile and ng-repeat not returning correct element

javascript,angularjs,compilation,ng-repeat

Internally, ng-repeat works by adding elements to the parent element of the directive ng-repeat is called on. Your compiled ng-repeat has no parent to add it's elements to, so it can't work. Add a parent div (Plunk) var html = '<div><div ng-repeat="number in numbers">{{ number }}</div></div>'; var html2 = '<div>{{...

AngularJS - accessing a array of objects in a controller goes wrong

json,angularjs,angularjs-ng-repeat,ng-repeat

I assume that line <tr ng-repeat="cycle in CycleCtrl.cycles"> Shall be <tr ng-repeat="cycle in cycles"> P.S: In french, Primère is spelled : PRIMAIRE...

How to display all the nested json data using ng-repeat?

Try ng-template withing ng-repeat directive. So we can create tree-structure view. Plunkr link : http://plnkr.co/edit/UIGyPsbavIC7OpF6DFEQ?p=preview <script type="text/ng-template" id="tree-structure"> <ul class="childElement"> <li ng-repeat="data in data.nodes" ng-include="'tree-structure'"></li> </ul> </script> <ul class="parentList"> <li ng-repeat="data in data.nodes" ng-include="'tree-structure'"></li> </ul> ...

Store value in a directive for later use

javascript,angularjs,angularjs-ng-repeat,ng-repeat,angularjs-track-by

To avoid the repetition of what is probably a long variable definition, you can use the ngInit directive, whose content will be executed each time a corresponding element is created. <div ng-repeat="bar in foo.bar> <div ng-repeat="qux in baz.qux" ng-init="myValue = {'item1':foo.var1, 'item2':qux.var2 }" > <div ng-click="myFirstFunction(myValue)"></div> <div ng-click="mySecondFunction(myValue)"></div> </div> </div>...

ngRepeat track by: How to add event hook on model change?

Probably you could create a directive and add it along with ng-repeat, so the directive when created(when item is added by ng-repeat) will emit an event and similarly when the item is destroyed it will emit another event. A simple implementation here: .directive('tracker', function(){ return{ restrict:'A', link:function(scope, el, attr){ scope.$emit('ITEM_ADDED',...

Getting updated values in ng-repeat Angular JS

angularjs,filter,ng-repeat

The problem is that you are not using ng-model to bind your actual input value to controller. From documentation: HTML input element control. When used together with ngModel, it provides data-binding, input state control, and validation. Try something like this in your markup for each input: <input type="text" id="educationDegree" name="educationDegree"...

Need help in ng-repeat

Try it like this <div ng-repeat="slider in sliderData[selectedSlider]" > {{slider}} </div> See plunker: http://plnkr.co/edit/v6upuVdhouTqCwDcTLjj?p=preview...

NG-Repeat doesn't update cleanly when scope is updated

angularjs,checkbox,ng-repeat,angularjs-filter

Try this ... w in workspaces track by $index When the contents of the collection change, ngRepeat makes the corresponding > changes to the DOM: When an item is added, a new instance of the template is added to the DOM. When an item is removed, its template instance is...

Angular JS, remember checkbox status when filtering

I'd suggested you to add one more property in your items array each item, that would be accessible as item.checked Markup <div ng-controller="MainCtrl"> <input type="text" placeholder="Search" ng-model="query"> <div ng-repeat="item in items | filter:query"> <input type="checkbox" ng-model="item.checked">{{item.name}} </div> </div> Working Plunkr...

ng-repeat display range

How about using limitTo? docs (angularjs v1.3.15) : https://code.angularjs.org/1.3.15/docs/api/ng/filter/limitTo <li ng-repeat="num in nums | limitTo: 6 | limitTo: -4">{{num}}</li> num = 3, 4, 5, 6 <li ng-repeat="num in nums | limitTo: 9 | limitTo: -4">{{num}}</li> num = 6, 7, 8, 9 jsfiddle: http://jsfiddle.net/n9brs8hh/1/ EDIT: another option would be to create...

Weird behavior of ng-repeat scope

The problem was ng-switch which creates a new scope therefore I have to use $parent to access the parent scope where everything is declared. angularjs - ng-switch does not bind ng-model...

Editable Table Cell in AngularJS

angularjs,angularjs-directive,angularjs-ng-repeat,ng-repeat,directive

I suggest making a directive that handles each cell. If you give this directive an isolate scope, you will not have to worry about managing all the data in your central controller. Something like: var tempEx = angular.module('TempEx', []); tempEx.directive('tempCell', function () { return { restrict: 'A', scope: { temp:...

directive can not ''require:ngRepeat'

require is used for accessing the controller of another directive. But ng-repeat does not have a controller. Take a look at the source for ng-repeat, the word controller doesn't even appear in the code. The documentation also makes no mention of a controller for ng-repeat. Typically, when you use require...

Angular: ng-repeat depending on state of other object

javascript,angularjs,checkbox,ng-repeat

So your issue here is mostly how to filter values in a repeat based on some external input? One way to do it is to do just that, filter! The standard filter in Angular takes an array and filters out only those entries maching a comparator function. You would do...

Can't get angular.js to loop through array and post to html

It looks like you have some syntax errors: var app = angular.module('myStore', []); app.controller('StoreController', function(){ this.products = [ { name: 'keyboard', price: 20.47, description: "well made from scratch", reviews: [ { stars: 5, body: "great fantadtic worksmanship", author: "[email protected]" }, { stars: 4, body: "amazing sale for the best", author:...

How to remove object from array within ng-repeat with AngularJS?

javascript,angularjs,table,ng-repeat

If you don't apply a filter to reorder or filter your array, you can do this: <div ng-repeat="item in items" ng-click="delete($index)">{{item}}</div> And the delete function: $scope.items = [...]; $scope.delete = function (index) { $scope.items.splice(index, 1); } Another way to do it without filter problems: (ONLY IE9+) <div ng-repeat="item in items...

angular: Why won't ng-repeat update with data from ajax call?

ajax,angularjs,ng-repeat

As @kasoban pointed out you might have an issue with multiple instances. Best practice is to create a service which handles your requests. You can inject it and call the request function from any controller then e.g.: $scope.active_simulations_dict = RequestService.get_active_simulations(); ...

How to access a field on a ng-repeat generated table?

Pass it into the function in the reapater, example: $scope.numbers = [1,2,3] $scope.myFunc = function(num) { console.log(num); } And the HTML <div ng-repeat="num in numbers" ng-click="myFunc(num)">Click me! {{num}}</div> ...

Angularjs ng-repeat over an array in objects

arrays,angularjs,ng-repeat

<div ng-controller="videoDisplayCtrl"> <div ng-repeat="x in videos"> <h2 ng-repeat="comment in x.comments"> {{comment.username}} </h2> </div> </div> You would need two loops, on to loop through your videos and the second to loop through your comments in each video which is another array....

Ng-repeat on directive creating duplicate DOM elements

javascript,arrays,angularjs,css-transitions,ng-repeat

The problem is this line of code in your directive: var svg = d3.select('scatter-template') d3.select() returns the first element that matches the selector. In this case, it returns the first <scatter-template> element in your repeater, which is why all of your SVGs end up in the first <scatter-template> element. What...

Why do CSS transitions occur for unshift() and not for shift() in ng-repeat lists?

Very curious. I was playing around with different possible solutions and one thing I found is that if you change your slide up to: $scope.slideUp = function() { $scope.items.push( angular.copy($scope.items.shift()) ); }; It will animate the third item. So it could be a reference issue within angular? Note: In my...

Unique Identifier For Elements of a List Parsed By ng-repeat in AngularJS

javascript,html,angularjs,angularjs-ng-repeat,ng-repeat

Use $index variable inside ngRepeat scope. <th ng-repeat="field in tab.excelFields" class="btn btn-danger" style="display:table-cell;" id="{{$index}}">{{field}}</th> ...

undefined value when using ng-repeat in directive with AngularJS

angularjs,angularjs-directive,angularjs-ng-repeat,ng-repeat

I believe you have two issues that are unrelated. The first is you have added your subBranches on the $scope as branch $scope.branch.subBranches = [subBranch1, subBranch2, subbranch3]; While your template uses branches <ul> <showbranch ng-repeat="subBranch in branches.subBranches"></showbranch> </ul> So, probably change your html to use branch.subBranches. The second problem you...

AngularJS Script to run after ng-repeat elements are loaded

angularjs,angularjs-directive,lazy-loading,ng-repeat,angular-services

Before getting into how to make this work, most of these types of jQuery plugins don't work well with angular since they make modifications to the DOM that angular doesn't know about. That being said, the trick is deferring the invocation of the jQuery plugin until after Angular has rendered...

Reply Textarea for particular post(using textarea), opening for all the comments

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,ng-repeat

Make $scope.innerComment an array of Booleans. $scope.innerComment = []; Now modify it in your view as ng-show="innerComment[$index]" This way you can set the value true for particular comment. $scope.showInnerComment=function($index) { console.log($index) $scope.innerComment[$index]=true; } Note: Whenever you add comment , push false in innerComment. ...

Angular JS ng-repeat filter only items with a property

arrays,angularjs,ng-repeat

Why not use ng-show / ng-hide <div ng-repeat="item in items" ng-show="item.hasFigure"></div> ...

Angularjs ng-repeat array - duplicate values

It does not work as is because you have duplicates in the array. When you repeat array of primitives, the default unique key used by angular to associate the item in the array with the DOM element is the item in the array itself. And ofcourse in your case it...

Ng-repeat in Angular bind to HTML template in object {{ key.value }}

javascript,arrays,angularjs,ng-repeat

Try <ng-include src="post.description"></ng-include> ...

Angular ng-repeat array

You are mixing two things here. Your current item is available as 'user', yet you try to access the outer array by index. You either have to use <ul ng-repeat="user in users.login track by $index"> <li>Usuario: {{user.user}}<br></li> <li>Clave: {{user.pass}}<br></li> </ul> or <ul ng-repeat="user in users.login track by $index"> <li>Usuario: {{users.login[$index].user}}<br></li>...

Memory leak in Ionic(or angular)?

javascript,angularjs,memory-leaks,ionic-framework,ng-repeat

If you follow the chart, you can see that the issue is the number of Event Listeners that are issued. Due to the way that $watch works within angular, removing an element from an array and then adding a new element doesn't remove the $watch on the old element, causing...

How to divide data to half while using ng-repeat?

javascript,angularjs,filter,ng-repeat

You can use two variables, like so function Ctrl($scope) { $scope.data = [ {value: "a"}, {value: "b"}, {value: "c"}, {value: "d"},// trying to divide from here {value: "e"},// and show the last part in other column {value: "f"}, {value: "g"}, {value: "h"} ]; var len = $scope.data.length, mid = len...

onFinishRender not being fired

angularjs,angularjs-scope,angularjs-ng-repeat,ng-repeat,angular-directive

You need to add the directive to one of your repeat elements. For example, from your Plunker add on-finish-render. <tr ng-repeat="data in model.DataList" on-finish-render> ...

Directive displaying Error: [$parse:lexerr] after moving template to templateURL

Your html should not contain concatenation that will mess while angular $compile that template. It should be plain html. mydirective.html <p> <div ng-repeat="select in data.output"> <div ng-if="select.name === 'choices'"> <p ng-repeat="choice in select.value"> <label> <input type="radio" ng-model="data.input[0].value" ng-value="$index">{{choice}}</label> </p> </div> </div> </p> ...

AngularJS - Trouble with ng-repeat

angularjs,select,ng-repeat,value

you can have nested hg-repeat if you like to have a nested table. <tr data-ng-repeat="driver in result.applications | filter: { name: selectedApplication } track by $index"> <td> <table> <tr ng-repeat="item in driver.gfx"> <td > {{item.name}} <td/> </tr> </table> </td> </tr> if you want to have single denormalized table, one option...

Angular data binding object in value attribute of option in select

I would not recommend to put whole JSON-Strings as Value in the select. If your description contains more text / html you might run into trouble. It might be better to set the selected concepts in a change handler like: ng-change="updateSelectedConcepts()" http://plnkr.co/edit/4ETrFlM0HrftAobTyvtS?p=preview In the plunkr you can see, that the...

ng-repeat wont iterate over nested JSON arrays