FAQ Database Discussion Community


AngularJS, ng-repeat, checkboxes and toggleAll

angularjs,checkbox,angularjs-ng-repeat,toggle,ionic-framework
There's no question. Searching over the internet, you can easily find examples with how ng-repeat and checkboxes work. All these examples include only few checkboxes. But, have you tried to create several hundred checkboxes, then use some toggle button to check/uncheck all checkboxes? The app becomes totally unresponsive. In browser...

ng-tags-input with dynamic model

javascript,angularjs,angularjs-ng-repeat,ng-tags-input
how can i use ng-tags-input inside a ng-repeat loop, when each element has different tags? How can i set the ng-model dynamically? <div ng-controller="myController"> <ul> <li ng-repeat="file in files"> {{file}} <tags-input ng-model="tags"></tags-input> </li> </ul> </div> app.controller('myController', function ($scope) { $scope.tags = ['tagA','tagB']; // $scope.tags['file1'] = ['tagA','tagB']; // $scope.tags['file2'] = ['tagC','tagD'];...

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

json,angularjs,angularjs-ng-repeat,ng-repeat
This is my JSON data: "multipleLayerDropdown" : [ {"title":"Google","url":"#"}, {"title":"Another action","url":"#"}, {"title":"Something else here","url":"#"}, {"title":"More options", "submenu":[ {"title":"Second Level 1","url":"#"}, {"title":"Second Level 2","submenu":[ {"title":"Third Level 1","url":"#"}, {"title":"Third Level 2","url":"#"} ]}, {"title":"Second Level 3","url":"#"}, {"title":"Second Level 4","submenu":[ {"title":"Third Level 1","url":"#"}, {"title":"Third Level 2","url":"#"} ]} ]} ] I would expect something like...

AngularJS: Prevent displaying the last separator when repeating multiple arrays

javascript,angularjs,angularjs-ng-repeat
Question: What is the most elegant way to ensure the last separator on each line is never shown? 11|18|3|8|12|1|22|31|61| 11:18:3:8:12:1:22:31: 11,18,3,8,12,61, 1 22 31 Note that the data originates from three different arrays, e.g., the data for line 1 is defined as: $scope.numbers = [11,18,3,8,12]; $scope.specialNumbers = [1,22,31]; $scope.additionalNumbers =...

How to get AngularJS to update the DOM on ng-repeat array splice? $scope.$apply() returns an error

javascript,angularjs,dom,angularjs-ng-repeat
SOLVED - I have this plunkr which demonstrates the issues I am facing. This is simple image uploader that also uses FileReader to display the image (thanks to angular-file-uploads). I have placed this in a dynamic form that which can be added and removed. Issues: In this plunkr, the dataUrl...

Bind AngularJS Checkbox If Exists in Javascript Object

javascript,angularjs,angularjs-ng-repeat
I have the following users object loaded using a AngularJS factory: { "user_id": "1", "groups": [ { "name": "Object Group 10", "group_id": 10 } ] }, { "user_id": "2", "groups": [ { "name": "Object Group 10", "group_id": 10 }, { "name": "Object Group 12", "group_id": 12 } ] } I...

In Angularjs, how to update table data after deleting a row from it

angularjs,angularjs-scope,angularjs-ng-repeat
I am using the angularjs to call Asp.net Web API. After I delete a row from the table? I also did not find the solution in w3schools. My HTML code <tr ng-repeat="user in users | filter: search"> <td>{{ user.Id }}</td> <td>{{ user.FullName }}</td> <td>{{ user.Mobile }}</td> <td>{{ user.Birthdate }}</td> <td>{{...

ng-repeat multiple value pairs on single element using angular-isotope

angularjs,angularjs-ng-repeat,jquery-isotope
I'm using the angular-isotope plugin to repeat multiple quotes in a masonry grid. My goal is to add multiple unique tags to each quote with each tag having its own unique filter class so that when you click the tag, only tags from that filter appear. Currently, the functionality works...

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

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,ng-repeat
Hi I am trying to implement facebook kind of post and reply comments using angularjs. Below is my code <doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script...

Angular - unable to get selected ng-repeated radio button using ng-submit

javascript,angularjs,angularjs-scope,angularjs-ng-repeat
I might be missing something really simple here - but if I use ng-repeat to create a bunch of radio buttons - I cannot get the selected one using ng-submit. The controller simply attaches an array of options to the scope. The markup simply creates a bunch of radio buttons...

adding multiple canvas's using ng-repeat

javascript,angularjs,angularjs-ng-repeat
i have the following controller code: new Layer('<canvas id="layer1" width="450" height="631" class="imageElement" style="position: absolute; left: 0; top: 0; z-index: 0; border:1px solid #d3d3d3;"></canvas>'); $scope.layerContainer = document.getElementById('layerContainer'); $scope.layers = [$scope.canvas]; //layer object function Layer(element) { this.canvas = element; } and the following html: <div class="col-xs-8" style="width: 450px; height: 631px;"> <div style="position:...

ng-model with isolated scope directive

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I have an isolated directive as an element How can I bind the ngmodel of it since the return html is being overrided ? &lt;div ng-repeat="x in list"&gt; &lt;form-element ng-model="value[x.name]"&gt;&lt;/form-element&gt; &lt;/div&gt; I am having troubles adding the ngmodel to it JS : app.directive('formElement', function($compile) { return { restrict: 'E', scope...

how to display sorted only 25 element in infinite scroll?

javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I am using infinite scroll in my demo ,In which I am showing only 25 element first time .When user scroll down to bottom it load more data and display that more data .It is do repeat steps if user want whole data to display (scroll to bottom load more...

angularjs $parse string to a “controller as” method

javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
How do I parse foo.callbacke to point to timerController.callbacke method? <div ng-app="timerApp" ng-controller="timerController as foo"> <div ng-repeat="item in [1,2,3,4]"> <div watcher="{'seconds': 'foo.callbacke'}"> {{seconds}} </div> </div> If you prefer: http://jsfiddle.net/e86e05a1/ (open console)...

How to create dynamically $scope variable and function in angular JS

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I trying to creating dynamically $scope variable and function and call to ng-click directive. My scenario is call dynamically function in ng-repeat & ng-click. Json { "listnames": [ { name: rock, age: 24, year: 1999}, { name: rock1, age: 24, year: 1999}, { name: rock2, age: 24, year: 1999}, {...

Angular ng-repeat, nested repeat for each parent loop

angularjs,angularjs-ng-repeat
I have some trouble with getting proper data. I have many-to-many relation model, so it's 3 tables, two with data, and third is connection between them (by ID's). For example, first table is stores, second is items, and third is 'have' that connects them by id. Now i should display...

Angularjs dynamic ng-model names in ng-repeat and display input fields sum

angularjs,angularjs-ng-repeat,angularjs-ng-model
I have some simple data from which I'd like to create dynamic ng-model names from. I know that if you have those names handy you concatenate their input values together and display them, like so: <p>{{blah--bleh}}</p> But what if I don't know those ng-model names in advance, or how many...

how to insert property in all objects?

javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I am trying to add properties in all object which is present in array.I will explain more in other words I have array of objects .I need to add “selected” property in all object .The value of “selected” property is true for first two object and for rest element it...

Angular ng-repeat filter passing wrong index

javascript,angularjs,angularjs-ng-repeat,bootstrap-modal
I'm having trouble figuring out how to pass the right index number from an ng-repeat with a filter. I'm using a modal-window to edit rows in a table. The problem is I rely on the index number to make a REST call and get the correct data for my edit...

why collection repect not show alternate color in angular js

angularjs,angularjs-directive,angularjs-ng-repeat,ionic-framework,ionic
I am using ionic framework .I make a simple demo of table using ng-repeat In this I make alternate color of each row which is running perfectly here is perfect code in which I used ng-repeat I used I ng-repeat <ion-scroll scrollbar-y="true" delegate-handle="i" ng-style="viewHeight"> <div class="row" ng-repeat="column in inv |...

Store value in a directive for later use

javascript,angularjs,angularjs-ng-repeat,ng-repeat
I would like to save an object in a ngRepeat so that I can use that object in its children, like shown in this code: <div ng-repeat="bar in foo.bar> <div ng-repeat="qux in baz.qux" myvalue="{'item1':foo.var1, 'item2':qux.var2}"> <div ng-click="myFirstFunction(myvalue)"></div> <div ng-click="mySecondFunction(myvalue)"></div> </div </div The object I want to generate and then use...

scope.$watch not working in angular directive

javascript,angularjs,angularjs-ng-repeat,watch,angular-directive
I have made a custom directive and used ng-model, but when the model updates, the directive not even though i'm watching the event. Here's the code: angular.module('Directives').directive("customDirective", ['$window', function ($window) { return { restrict: "E", require: 'ngModel', scope: { ngModel: '=', }, link: function (scope, elem, attrs, ngModel) { //...

ng-repeat with empty objects

angularjs,angularjs-ng-repeat
I'm getting a 'Duplicates in repeater' error. I read somewhere that I can track by index, but as soon as I do that all my object title and description values become duplicated. I need to define unique titles, descriptions and asset arrays for each individual step. How can I do...

how to iterate json object in angular js?

angularjs,angularjs-directive,angularjs-ng-repeat,ionic-framework,ionic
I have json object and I need to iterate that object in angular. I will tell you my problem. I have one button. On click of that button user can select multiple elements. I take example ('a','b','c'...so on). When user select 'a' and close the pop up I need to...

Json String Date to date Object with angulajs Http get

json,angularjs,date,datetime,angularjs-ng-repeat
I am trying to order a list by date and popularity. From service i have a json response which has date in string format. Is it possible to change the date from Http get response to date object so that i want to use OrderBy filter to sort the list...

Angular ng-repeat $index

javascript,html,angularjs,angularjs-ng-repeat,angularjs-ng-click
I'm creating a list of items the user can click to go to the next picture. <ol class="indicators"> <li ng-repeat="img in pics" ng-click="slideTo($index)"></li> </ol> this code works but the problem is that it doesnt fill in the $index in the ngClick directive. This is the resulting html: <li ng-repeat="img in...

AngularJS : How to make dynamic field button only for last button?

javascript,angularjs,dynamic,angularjs-ng-repeat
In the dynamic input field is there any option to implement plusSign = true only for the last item ? (function() { var app = angular.module('managementApp', []); // var app = angular.module('managementApp', ['ngRoute']); app.controller('phonebookController', function($scope, $http) { $scope.dynamicField = function(buttonStatus, inputIndex) { if (!buttonStatus) { $scope.currentContact.contacts.push({ "phone": "" }); }...

Specifying Angular ngModel Value with ng-repeated options

javascript,angularjs,angularjs-scope,angularjs-ng-repeat,angular-ngmodel
I've got a select dropdown, whose options are being ng-repeated out of an object called $scope.bars. However, my ng-model, which is set to a sub-value of $scope.bars, is not correctly choosing an option. Instead, the select box is blank by default, indicating an 'undefined' value. Here's my HTML: <div ng-app="programApp"...

Why did the model Array here not update in the DOM after updating in the Controller?

javascript,angularjs,angularjs-ng-repeat,angularjs-model
http://plnkr.co/edit/7OnKAGvVNXWLwN5fZqJu?p=preview I'm setting up a question related to infinite scroll and noticed that when I update the $scope.tags array I have once the tags have been scrolled all the way up, that the tags don't actually update. In my project I use a service to grab new data, however in...

Scroll AngularJS ngRepeat with Ajax loading data

angularjs,scroll,angularjs-ng-repeat
First of all a plunk: http://embed.plnkr.co/C866y3LHCE7QfBGuFQPQ/preview So here I'm getting a set of posts via Ajax and displaying them using ngRepeat. Then (when the posts are done rendering) I want to scroll the page to a specific post (let's say post №18). Seems simple, but I can't get it working....

How do I show an unknown length nested array without crashing the browser?

javascript,html,angularjs,angularjs-ng-repeat,jade
I have an huge array organized sort of like this: [{ name: 'name1', nodes: []}, { name: 'name2', nodes: [ { name: 'name21', nodes: [ { name: 'name211', nodes: []}, { name: 'name212', nodes: []}] }] }, { name: 'name3', nodes: [...] }, {...} ] and it goes on... I...

why ngrepeat not working properly not display data?

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I am making a simple demo of nested ng-repeat with some condition.it is not printing any values why ? Actually I am trying to get below result after iteration of two objects Expected result ght nor abc pqr code pen or plunker \ <ion-scroll scrollbar-y="true"> <div class="row rowclass" ng-repeat="column in...

ng-repeat filter not filtering out null values

angularjs,angularjs-ng-repeat
The JSON : $scope.results=[ { id: 1, name: null, class: "First" }, { id: 2, name: John, class: "First" }, { id: 3, name: Mary, class: "Second" }, { id: 4, name: null, class: "Third" } ] HTML: <div class="col-md-6 form-group" data-ng-repeat="item in results| filter:{name:'!null'}">{{item.name}}</div> I wanted to filter out...

Why can't I set the height of an element with ng-style?

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I am trying to add dynamically set the height of a div, but it is not successfully being set. I get the height of window and divide it by 3, but it is not working. Here is where I set the height: <div id="wrapper" ng-style="height :hgt+'px'"> I am setting the...

Why the data is not displayed in view may I use $scope.apply?

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I am getting data from service and display on view using ng-repeat .Actually I am getting event when user scroll to bottom mean when user reached to bottom I will do something.When It reached to bottom I am changing the contend of my array .I am getting the correct contend...

Jquery Time Picker inside ng-repeat is not working

jquery,angularjs,angularjs-directive,angularjs-ng-repeat,datetimepicker
As i am proceeding into my project. In Some place i need to repeat few input fields which contains two time html5 field. Everything was going well when i was testing in Chrome but when i tested in in firefox it is showing as text field. (Firefox does not support...

Comparing objects between 2 nested arrays in Angularjs and display respective matching data

javascript,jquery,angularjs,angularjs-ng-repeat,jquery-mobile-collapsible
I'm having two arrays : first one is empdata holding empid and events attended by that employee, then second array is holding event details. I need to compare empid from array with user input and display particular event details attended by respective employee using collapsible jQuery. Find total price also....

Angularjs changing class on mouseenter (hover)

javascript,css,angularjs,angularjs-ng-repeat
I have the following ng-repeat that displays a star whether or not item.default is equal to true <div ng-repeat="item in items"> <i class="fa" ng-class="item.default == true ? 'fa-star' : 'fa-star-o'"></i> </div> I am using fontawesome and I wanted to do the following: If item.default == false, I wanted to remove...

Updating a value based on a range of inputs in AngularJS

javascript,angularjs,angularjs-ng-repeat,angular-ngmodel
What I am essentially trying to achieve here is to have a remaining amount that decreases in amount as the user enters the amount in to a series of text fields. These text fields are generated by an angular loop and its the remainingAmount var that I need to be...

ng-repeat display range

angularjs,angularjs-ng-repeat,ng-repeat
I want to display ranges like 3 4 5 6 or 6 7 8 9 How can I do this? <div ng-app ng-controller="MainCtrl"> <ul> <li ng-repeat="num in nums">{{num}}</li> </ul> </div> Here is my code: http://jsfiddle.net/duketopmost/n9brs8hh/ Thanks a lot. ...

Consultation on ng-repeat variable html

angularjs,angularjs-ng-repeat,ionic-framework
I'm carrying a $ ionicPopup with a variable that I get from my webservice. The problem that I have is not as filling into a variable. I leave my code: if(data.Count > 0){ $scope.areas = data.Area; var contentHtml = '<ul ng-repeat="area in data.Area"><li>{{area.name}}</li></ul>'; $ionicPopup.show({ title: 'Areas disponibles', subTitle: '', content:...

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

angularjs,angularjs-ng-repeat,ng-repeat
I'm new to Angular and this question most likely is a trivial one! <div ng-controller="index"> <table class="table table-striped"> <thead style="font-weight: bold;"> <td>Update Time</td> </thead> <tbody> <tr ng-repeat="doc in allDocuments | searchFilter:srcStr"> <td>{{doc.updateTime}}</td> </tr> </tbody> </table> </div> The above html renders as follows: Update Time 1419421439570 1418552500904 1418368139999 1417703400456 But these...

How to “know” the index of ng-repeat in its loop in Angular.JS?

angularjs,angularjs-ng-repeat
I am new to Angular.JS & are currently working on my first project. I have a page full of entries of the kind <h1>Title</h1> <p>Teaser</p> <p>(a link)</p> The teaser may include HTML formating or elements like the "&". What I want to do is to "parse" this Teaser so that...

why the button is not visible for all time (visible while scroll )?

angularjs,angularjs-directive,angularjs-ng-repeat,ionic-framework,ionic
I am trying to make pop over in which there is multiple selected element present .In that there is header present and contend but footer is not present .I need there is a close button on footer which is visible at all time .it is also visible when scrolling the...

How to append Urls in angular routing?

asp.net,angularjs,asp.net-mvc-5,angularjs-ng-repeat,angular-ui-router
How to do url(string) cocatenation in angular routing. Please refer the below snippet to understand my question. app.config(['$routeProvider', '$location'], function($routeProvider) { when('/', { templateUrl: '/AlbumsList.html', controller: 'a1Ctrl' }). when('/albums/:albumName', { templateUrl: 'AlbumsList.html', controller: 'b1Ctrl' }) }) app.controller('a1Ctrl', function($scope, $http) { $scope.albums = function() { //ajax getting data from server }...

Trying to output html with angular js

angularjs,angularjs-ng-repeat
Im trying to output html with angular js. I know the html is going to be ok. This is what im trying now: <div class="items-list" id="items-container"> <div ng-repeat="data in ItemsData track by $index" ng-bind-html='ItemsData'> <-data-> </div> </div> And this is what i pretty much am doing with the data $.ajax({...

Automatically update selected option in the angular controller to a select within a nested repeat

angularjs,angularjs-ng-repeat
I have a select input that I want to update from within my model to be selected based on what I get from a REST API service. I've created a simple fiddle example that illustrates my issue. First it has a select with options inside of a nested ng-repeat, with...

why after loading more data filter stop working?

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
there is one filter functionality in my demo I will explain my problem I have one table in which i use infinite scroll is implemented In other words when user moves to bottom it load more data.There is search input field in top .Using this I am able to filter...

Add new text box on click of a button in angular js

angularjs,angularjs-ng-repeat,angularjs-controller
How do I add new text box when submit button is pushed. This is what I have tried and I know there's some thing wrong. I am still new to angular js. Example: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-ngController-production</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> <script> angular.module('controllerAsExample', []).controller('SettingsController1', function ($scope)...

how to make first element in ng-repeat

angularjs,angularjs-ng-repeat,ng-repeat
i have a task to make name of user first of all list. Heres the example $scope.items = [John,Bob,Tanya,Owen,George]; <div ng-repeat="item in items"></div> The result will be: John Bob Tanya Owen George How can i make that Owen will be first like: Owen John Bob Tanya George ...

angularJs Getting an extra space when converting comma separated value

json,angularjs,angularjs-ng-repeat
I trying to convert a JSON content into the comma separated value in a table format. I achieved this by using table with ng-repeat, but I am getting an extra space in end of the each value. HTML code: <div ng-controller="JsonConvertController"> <div> <button class="btn btn-success" id="btnjsonConvert" ng-click="convertJsonToServiceValues()">Convert Json</button> </div> <table>...

Angular Nested ng-repeats with json call not working

json,angularjs,nested,angularjs-ng-repeat
I am attempting to make a nested list like this using ng-repeat and a json file: [] Pizza King North Region [] Pizza King 102 [] Pizza King 103 [] Pizza King 104 [] Pizza King South Region [] Pizza King 201 [] Pizza King 202 [] Pizza King East...

Default value to select loaded from web service

angularjs,angularjs-ng-repeat
I'm carrying a selector from a query to a web service, in this I have no problem. But I need to load a default value, such as "Select value" or something, but I could not get. I leave my code <select ng-model="datas.selectedVal" ng-change="update()"> <option value="{{org.id}}" ng-repeat="org in organizations">{{org.name}}</option> </select> Controller...

How do I run ngRepeat on obj with strings [duplicate]

javascript,angularjs,angularjs-ng-repeat
This question already has an answer here: How to use ng-repeat for dictionaries in AngularJs? 3 answers Im trying to run ng-repeat on this obj to display "settings": var settingsTest = { "id": "2", "active": "1", "settings": { "action":0, "somestaff":0, "message":0, "mouth":0, "heost":0, "gaming":0, "live.live":0, "notifications": 0, "profile": 0...

AngularJS ng-repeat in Drupal7 Dupes Error

angularjs,drupal-7,angularjs-ng-repeat
Good afternoon, I'm having an annoying issue with AngularJS (v1.3.15) inside of Drupal7. (Note: I just mentioned the CMS to be complete, but I don't believe that it's the issue.) I'm trying to use the ng-repeat on a div, but I keep getting the Error -> Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.15/ngRepeat/dupes?p0=x in...

AngularJS ui-bootstrap accordion cannot access variable outside accordion in filtered ng-repeat

angularjs,angularjs-ng-repeat,angular-ui-bootstrap
I am using AngularJS UI Bootstrap's accordion. I am using ng-repeat with filter inside the accordion. Now the problem is that I cannot access the filtered variable outside <accordion>. If I ditch the accordion and use simple HTML it works fine. <div ng-app="myApp"> <div ng-controller="AccordionCtrl"> <div>outside accordion{{filteredCampaigns}}</div> <input type="text" ng-model="q"...

Angular ng-repeat cache (avoid re-rendering on state change)

javascript,angularjs,performance,caching,angularjs-ng-repeat
We have huge rendering spikes with ng-repeat in Angular application. Main page shows a huge list of cover images ("::" and "track by" are in place). On first load it works acceptable. But if user changes the state (we use UI-Router) and goes back to the home page afterwards then...

Filter results in angularjs based on select value

angularjs,angularjs-ng-repeat,ng-options,angular-filters
This seems like it should be easy but I am new to angular and not grasping this concept very well. I am hoping to run an ng-repeat over a dataset and then be able to filter the results based on a selected option in a select box, using the exact...

editing values of ng-repeat

html,angularjs,angularjs-ng-repeat
I'm fairly new to angularjs. I'm trying to edit the data in $scope.works. I've also tried xeditable, but could'nt really do much with it. I know its a simple thing to do. But your answers would be really helpful. Thanks. Here's my code - My angular.js code - $scope.works=[{id:'01', position:'web...

AngularJS binding not occurring on page until a user action

angularjs,asp.net-web-api,angularjs-ng-repeat,azure-mobile-services
I've got my first angular app which displays some data from a list via ng-repeat. The controller for the view sets a few variables to scope - some directly in the function and another from an API call. The data from the in function load is showing up in that...

Why is my ng-if in td having unexpected results?

angularjs,angularjs-ng-repeat
Maybe I am completely confused how td works as I haven't used tables in my code for yeeaars (strong div believer), or maybe I am confused on how ng-if is attempting to separate my data. Either way, I am not getting my expected results, but there is otherwise nothing wrong...

How to create a delayed hover action, which does not execute if user leaves before time is up? AngularJS

javascript,angularjs,angularjs-ng-repeat
Goals: Hovering over a tag for 2 secs will display a popover Leaving a tag will close any open popovers Leaving a tag before 2 secs and nothing should display Original Problem: http://plnkr.co/edit/PDcLQNudx53Dag49FyCw?p=preview Failed Fix Attempt: http://plnkr.co/edit/39FGMocKB5GtQWnI1TFw?p=preview I'm trying to have a delayed popover div that shows up after hovering...

how to set dynamically height to element?

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I am trying to set dynamically height to element in my demo .I will tell you issue I am taking static or constant value of height in my demo .I take 250px constant value #wrapper{ background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0); min-height: 250px; background-repeat: no-repeat; } .But I need to add this height dynamically...

AngularJS access JSON index values dynamically

angularjs,multidimensional-array,angularjs-scope,angularjs-ng-repeat
My scope data: $scope.data = "category": [{ "name": "cat1", "behaviour": "normal", "selected": 0, "values": [{ "label": "define", "count": 6 }] }, { "name": "cat2", "behaviour": "normal", "selected": 0, "values": [{ "label": "type", "count": 6 }] }, { "name": "Company", "behaviour": "multi-select", "selected": 0, "values": [{ "label": "VW", "count": 4 },...

Validate row with inputs in a table that has been built dynamically in AngularJS

javascript,html,angularjs,validation,angularjs-ng-repeat
I've been struggling on the solution to the following problem. I have a table in which every row is build dynamically by ngRepeat. Every row has four columns and in every column there is an input element. My question is - how can I validate these four input fields and...

AngularJs “ng-repeat-start” with table

javascript,angularjs,multidimensional-array,angularjs-ng-repeat,ng-repeat
I have an object in this format, I am trying to print it as a table. [{categoryName: "category1", value:[{name:"item1.1"}{name:"item1.2"},...]}, {categoryName: "category2", value:[{name:"item2.1"},...]},...] So, categaory name should be the header and values under it should be subheaders, as in the colspan of categoryname should be equal to number of values in...

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

html,angularjs,table,angularjs-ng-repeat,ng-repeat
Here I have a json data as below: [ {"teacher":"Tom","student":[{"name":"stuA","project":"projectA"},{"name":"stuB","project":"projectB"}]}, {"teacher":"Jerry","student":[{"name":"stuC","project":"projectC"},{"name":"stuD","project":"projectD"},{"name":"stuE","project":"projectE"}]}, {"teacher":"Lee","student":[{"name":"stuF","project":"projectF"}]} ] And now I wanna render it into an irregular table like the picture: So how can I make it possible by using ng-repeat?It's really a confusing problem. here is the html code that makes the table...

ng-repeat dynamic variable name

angularjs,angularjs-ng-repeat,ng-repeat
I am implementing ng-repeat to create elements for a bootstrap accordion interface. I have ng-repeat working however the issue I have is that I need to dynamically create the ID in order to target the accordion element individually. My ng-repeat HTML block references: <div class="panel-heading" data-toggle="collapse" data-parent="#products-accordion" href="#collapseOne"> And lower...

Select some data and then persist to next controller/view in Angularjs

angularjs,angularjs-ng-repeat,angular-ui-router,angular-resource
I am bringing in some simple data via a service that uses angular-resource like so: angular.module('InvoiceService', ['ngResource']) .factory('InvoiceService', function ($resource) { return $resource('data.json'); }) .controller("DashboardListCtrl", function (InvoiceService) { var vm = this; InvoiceService.query(function (data) { vm.invoices = data; }); vm.submit = function (form) { console.log(form) }; }); And the html:...

how to use filter on button click in angular js

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,ionic-framework
could you please tell me how to sort array in ascending or descending order on button click .Actually I have a button on header "V" .using button click I want to display data in ascending order .Actually I am making a grid view in Ionic using angular js .But I...

a simple select input is not working properly with angular-meteor

angularjs,select,meteor,angularjs-ng-repeat,angular-meteor
this is a weird thing: using angular-meteor library put a simple select input on the page: <div id="category"> <select ng-model="selectedItem"> <option ng-repeat="p in inputCategories" value="{{p.name}}"></option> </select> </div> select itself shows up, it has the correct number of options, but the actual option text is invisible! When inspected, it shows the...

binding radio buttons to ng-model with angular in ng-repeat

javascript,angularjs,angularjs-ng-repeat,angularjs-ng-model
I'm currently learning angular.js and I'm running into a problem. I'm listing radio buttons based on the items fetched from the database and when I click on any of them my model doesn't get updated. I added an input to test and the input update the model right away. Any...

Angularjs - using ng-repeat and ng-model to populate an array

javascript,arrays,angularjs,angularjs-ng-repeat,angularjs-ng-model
I'm trying to use ng-repeat and ng-model in order to populate an array. The number of required elements in the array comes from a select element`. The relevant part of my controller: app.controller('AddMsgCtrl', function($scope){ $scope.range = function(n){ var array = []; for(var i = 0 ; i < n ;...

AngularJS: avoid using $timeout to wait for image loading completion

javascript,angularjs,angularjs-directive,angularjs-ng-repeat,angularjs-timeout
I'm trying to create my own image carousel as an angularjs directive; I want to keep it as lightweight and unopinionated as possibile, so I thought I'd just create a <carousel></carousel> wrapper for a set of <img> elements, like so: <carousel> <img ng-repeat="image in images" ng-src="{{image.src}}" alt=""/> </carousel> What the...

Angular Ng-Repeat Ordered List

javascript,angularjs,angularjs-ng-repeat
I am having trouble with Angular, this is my first time using it after taking the lessons in CodeAcademy. My code is as follows: HTML: <body style="padding-top: 0px;" data-spy="scroll" ng-app="SummerMill"> <section id="intro" class="main style1 dark"> <!-- Header --> <header ng-controller="MainController" id="header"> <!-- Logo --> <h1 id="logo">Summer Mill</h1> <a ng-mouseover="locations()" style="color:black;text-decoration:initial;"...

How to get value from ng-repeat when event not from element within ng-repeat (i.e. not ng-click)

javascript,angularjs,angularjs-directive,angularjs-ng-repeat,angular-filters
I have a lookahead fuzzy search directive for category tagging: <input type="text" class="form-control" placeholder="Apply Tags" ng-keydown="checkKeyDown($event)" ng-change="searchTags()" ng-model="searchText"> <div ng-show="searchText.length>0"> <ul> <li ng-repeat="tag in suggestedTags | fuzzySearch : searchText : 'OR' track by $index" ng-class="{active : $index === selectedIndex}"> {{tag}} </li> </ul> </div> This is how I'm handling things suggestedTags:...

AngularJS: ng-repeat with ng-include on a multidimensional array

angularjs,angularjs-ng-repeat,angularjs-ng-include
I've started AngularJS yesterday and I need help on a large abstraction. So, I have a multidimensional array in my Controller.js: var appname = angular.module('appname'); appname.controller('articleCollectionController', ['$scope', '$sce', function ($scope, $sce) { $scope.news = [{ title: 'foobar breakthrough', text: 'foobar foobar', image: '<img class="img-responsive img-hover" src="images/foo.jpg">', date: 'June 17, 2014',...

how to toggle orderby in angular js

javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I am trying to show data in ascending and descending on same button click using angularjs .I am able to show data in ascending order .But how I will show descending on same button click (as a toggle in jquery ). I will tell you problem I have button on...

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

json,angularjs,angularjs-ng-repeat,ng-repeat,ng-options
This is my first question, so please be gentle on me! I hope you can help. I am trying to define a select box (dropdown) within my HTML view using ng-repeat, so that I can create a select for each item in an array. I have successfully achieved this, but...

ngRepeat in ui router

angularjs-ng-repeat,angular-ui-router
i have a dynamic form that is generated from a json and my ngRepeat looks like this: <div ng-repeat="(q, w) in user.education"> <div class="form-group"> <label for="{{q}}">{{q}}</label> <input type="text" class="form-control" name="{{q}}" ng-model="user.education.{{q}}"> </div> </div> so the problem is that the {{q}} in the ng-model isnt showing the data... but in the...

Ng-model not working on dynamically added html controls

javascript,angularjs,angularjs-ng-repeat,angular-ngmodel
I am trying to preselect the selects with same ng-model but when I add an item in $scope.alertConditions.rows the selects are not pre-selected based on ng-model. Any help is appreciated. HTML: <div class="alert_center_table_body" ng-repeat="alertCondition in alertConditions.rows track by $index"> <div></div> <div> <select ng-model="alertConditions.run_alert" ng-change="getRunDates(alertConditions.run_alert, $index)"> <option ng-repeat="run_alert in runAlerts"...

Angular ng-repeat like parameters binding

javascript,angularjs,angularjs-directive,angularjs-ng-repeat
Is it possible to bind angular ng-repeat parameters to do something like this: ng-repeat="[BIND_THIS]" Furthermore, I'd like to be able to bind in this kind of scenario: <input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control"> Would become <input type="text" ng-model="customSelected" placeholder="Custom template"...

Dynamically add filter in ng-repeat

angularjs,angularjs-ng-repeat,angularjs-filter
I am building a table where the rows and columns are built entirely based on the data that is sent to it. I'm very close to having it work, I'm having trouble figuring out how to build a custom filter and pass in the filter patterns dynamically The object that...

Json Data Handling using AngularJS

javascript,arrays,json,angularjs,angularjs-ng-repeat
I have a new case, where I need help. I want to have 9 buttons and a panel that displays the movie details, depending on which one has been clicked. So say if I clicked 'Transformers', the transformers detail should appear in the panel. Then if I were to click...

Nested NG Repeating

angularjs,twitter-bootstrap,angularjs-ng-repeat,ng-repeat
I have a JSON object (see below) which represents Categories and inside Categories there are Products. Having read bout ng-repeat it seems I need to create an ng-repeat to render the HTML blocks for each category, but also for each of the products within the category there is a similar...

Iterate over an array of integers using ng-repeat

angularjs,angularjs-ng-repeat
I don't think this question fits in the context of angular.Am having an array of integers var myArray=[1,2,3,4,5].Is it possible to do a ng-repeat and display the integers on myArray

AngularJs Json Ng-repeat with Button Control

json,angularjs,angularjs-ng-repeat
Here is a project I am working on for fun trying to get used to the ng-repeat directive. I created the following so far. Its working but I am attempting to add more to this to make it work better. I have been trying to add either buttons or a...

Weird behavior of ng-repeat scope

javascript,angularjs,angularjs-ng-repeat,ng-repeat
I have this piece of HTML: <div ng-switch="view"> <div ng-switch-when="products"> <input class="form-control" placeholder="Search" ng-model="searchText" /> <ul ng-show="products && products.length > 0"> <li class="head"> <div class="column col-select"><input type="checkbox" ng-model="$parent.allSelected" ng-change="$parent.selectAll($parent.allSelected)" /></div> <div class="column col-name">Name</div> <div class="column col-code">Code</div> <div...

AngularJS ng-repeat query filter not show for nested object

javascript,angularjs,angularjs-ng-repeat,angularjs-filter
I have the following data, how to query string under "talent"? I used ng-Repeat='friend in friends', but it can't search the data under talent. For example: When I type piano, I expect it show the John node. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-example98-production</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> </head>...

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

angularjs,angularjs-scope,angularjs-ng-repeat,ng-repeat,angular-directive
I have a directive working without any issues when the HTML markup is written in the template section of the directive. I've just moved the HTML markup in a .html file and on load of the page, i am seeing: Error: [$parse:lexerr] http://errors.angularjs.org/1.3.14/$parse/lexerr?p0=Unexpected%20next%20character%20&p1=s%2016-16%20%5B%5C%5D&p2=option.name%20%3D%3D%3D%20%5C'choices%5C' Original directive: app.directive('myDirective', function () { return...

Angular: How to disable an anchor tag out of an array (ng-repeat) of anchor tags

javascript,angularjs,angularjs-ng-repeat,anchor,disabled-input
I have an ng-repeat of anchor tags that is displaying a list of clickable group memebers: <a href="#/contact/{{ ::member.fullProfile.xpid }}" ng-click="storeRecentContact(member.fullProfile.xpid)" class=" GroupRow ListRow ListRow-Contact vmsection ng-class:{'last': $last}" ng-class-odd="'ListRowOdd'" ng-class="{'ListRowLast':$last}" data-ng-repeat="member in group.members | filter: searchFilter() | orderBy: [selectedSort.type, 'fullProfile.displayName'] track by member.xpid" droppable="Call" ng-disabled="member.contactId ==...

JQuery functions not working with ng-repeat

jquery,html,angularjs,angularjs-directive,angularjs-ng-repeat
I am using ng-repeat to repeat some divs which show list of the records. Issue : I want to do is that when user is clicked on the record popup should be open. ng-repeat is working perfectly but the issue is this that JQuery click event is not working for...

Update : I get sum of products and total cost but it's not updating when quantity updated

angularjs,angularjs-ng-repeat
I get the sum of products and over all cost but i want to update when item quantity changes .filter('total', function () { return function (input, property) { var i = input instanceof Array ? input.length : 0; if (typeof property === 'undefined' || i === 0) { return i;...

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

angularjs,angularjs-ng-repeat,ng-repeat,ng-submit
Im building a cart. Each product has "addons" these for example size:big dressing: No salad dressing Drink: cola these "addons" are from the database. and returned from the API as objects. object looks like this: object cat_addons (addon_group) -object (addon) -object - etc object item addons (addon_group) -object (addon) -object...

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

javascript,angularjs,angularjs-ng-repeat,ng-repeat,angularjs-track-by
I have a simple ngRepeat like the following: <some-element ng-repeat="singleRecord in arrayOfRecords track by singleRecord.id"> <!-- stuff --> </some-element> arrayOfRecords is updated from a server and may contain new data. ngRepeat's track by feature can figure out when a new element is added to the array and automatically updates the...

If image is null from JSON, use another image - AngularJS

json,angularjs,wordpress,angularjs-ng-repeat,wp-api
Below I have an ng-repeat where the inner div gets a background image set after reading a JSON file. My question is - If post.featured_image.attachment_meta.sizes.medium.url does not exist or is null, what would be the best approach to replace this with another image? Say a default backup image? A solution...

Angular JS Filter Group Select Filter

javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I have a users object similar to the one below: $scope.users = [ { name : 'John Doe', attached_groups = [ {1:object}, {2:object} ] }, { name : 'Bob Doe', attached_groups = [ {3:object}, {4:object} ] } ]; In my HTML I have the following group select. <select id="group_filter"> <option...

AngularJS Undefined Variables When Trying To Update View From Controller

javascript,angularjs,angularjs-ng-repeat,angularjs-ng-init
I am new to AngularJS and am trying to rewrite my webpage in the "angular way" instead of using jquery but I am running into some problems with my understanding. I have my HTML like so: <body style="padding-top: 0px;" data-spy="scroll" ng-app="SummerMill"> <section id="intro" class="main style1 dark"> <!-- Header --> <header...

why checkbox is display in angular js?

angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat
I am trying to make a simple demo of a multiple select option. I also have a limit in my demo. In other words, a user can only select two items. I am able to do that but when a user selects a third one, a checkbox is selected for...

AngularJS ng-repeat grid of two divs per row

javascript,css,angularjs,angularjs-ng-repeat
I want to load data from an array and display two divs per row. Eg: say there are 8 objects. I want them to appear in four rows of two 1 2 3 4 5 6 7 8 Code: <div ng-repeat="accObj in accountsArr" width="100%"> <div class="col" width="100%"> <div ng-if="$even" style="width:50%;height:70px;background-color:red">...