w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories
- can't use a DIV
AngularJS - Scope is not what expected inside an ng-click event of ng-repeat
Its true that ng-repeat creates a new scope. But you cannot access that scope by doing $scope inside your controller. Instead you can do as below: <button ng-click="send(message)">Send</button> And in your JS: $scope.send = function(message){ alert(message.text); };

Categories : Angularjs

AngularJS - Directives, ng-repeat, ng-click and Jquery
I notice a couple of things: 1) you don't need the linking function at all. When you use a template, angular takes care of compiling the directives inside the template. Additionally, your linking function was binding to the selector element, not each li individually, hence why you couldn't determine the data object for which one was clicked. 2) Your directives are using the inherited scope, but both assigning different things to the same property name. In the selector directive, you are assigning $scope.selected to be a function. In the selected directive, you are assigning $scope.selected to be an array of values. These interfere because they are using the same scope. I was able to fix it by changing the first one to just $scope.select = function(data).... 3) Your wrote your even

Categories : Javascript

Outputting HTML inside ng-repeat in AngularJS
Look at ngBindHtmlUnsafe if you're absolutely sure that the code you're creating can't contain any exploits from user data: http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe Look at ngBindHtml from the Sanitize module if you need to sanitize a possibly hazardous piece of html: http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml

Categories : Angularjs

AngularJS Form Validation inside an ng-repeat
or else... add ng-change directive on the select dropdown which calls a Controller method and that controller method sets a flag whether to validate form or not. eg. <select ng-change="checkIfFormShouldbeValidated()" ng-model="item.name"></select> // Inside controller $scope.checkIfFromShouldBeValidated = function(){ if( $scope.item.name == 4th Item ) $scope.shouldValidate = true; else $scope.shouldValidate = false; }; $scope.formSubmit = function(){ if(($scope.shouldValidate && form.$valid) || (!$scope.shouldValidate)){ // Submit Form } }; See if it helps.

Categories : Validation

Angularjs strange behaviour of a modal directive inside ng-repeat
No need for the compile function here. This works: var myAppModule = angular.module('myApp', []); myAppModule.controller('TextController', function($scope) { $scope.userModel = [{id:'1',name:'user1'},{id:'2',name:'user2'},{id:'3',name:'user3'}]; }); myAppModule.directive('formModal', ['$http', '$compile', function($http, $compile) { return { scope: { formObject: '=' }, link: function(scope, element, attrs){ var template, $element, loader; loader = $http.get('modal.html') .success(function(data) { template = data; }); loader.then(f

Categories : Angularjs

AngularJS: binding to ng-repeat blurs the input inside the repeater
Instead of using a function it would be preferable here to to use $watch for changes to pieces. Then in watch you can perform logic to determine if this is the right time (see timeout logic) to trigger changes and call out to a factory to perform the save. As shown here http://jsfiddle.net/xmltechgeek/HbDDf/ this works without loosing focus. var app = angular.module('app', []) .controller('controller', function($scope, $timeout, dummy) { $scope.piece = {}; $scope.piece.movements = [{name: "Allegro"} , {name: "Presto"}]; var saveTimeout; $scope.$watch('piece.movements', function(){ $timeout.cancel(saveTimeout) saveTimeout = $timeout(function(){ dummy.save($scope.piece.movements, function(data){

Categories : Angularjs

AngularJS ng-repeat with custom element inside a table is rendering strangely
Apply the directive to <tr> like this: <table class="table table-hover"> <tr my-element blah='p' ng-repeat="p in people"></tr> </table> app.directive('myElement', function () { return { restrict: 'A', scope:{ ngModel: '=blah' }, template: '<td>Name: {{ ngModel.name }}</td><td>Age: {{ ngModel.age }}</td>' } }); Working Demo

Categories : Javascript

Angularjs Make drop down disabled when pressing checkbox inside ng-repeat
From ngRepeat doc: The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope The trick is to add controlChecked to form and remove the ng-init. So they will be in the same scope. <div ng-show="control.type == 'Checkbox'"> <input type="checkbox" ng-model="form.controlChecked" name="{{control.id}}"/> </div> <div ng-show="control.type == 'DropdownList'"> <select ng-model="control.id" ng-disabled="!form.controlChecked" ng-options="value.code as value.name for value in control.items" name="{{control.id}}" > </select> Demo

Categories : Javascript

Ng-click built inside Ng-Repeat - not fires its function in chrome, works in FF
This is because Chrome does not fire a click event for <option>s. See onclick on option tag not working on IE and chrome Would an ng-change on the <select> not do the trick?

Categories : Angularjs

Adding parameter to ng-click function inside ng-repeat doesn't seem to work
Instead of <button ng-click="removeTask({{task.id}})">remove</button> do this: <button ng-click="removeTask(task.id)">remove</button> Please see this fiddle: http://jsfiddle.net/JSWorld/Hp4W7/34/

Categories : Angularjs

Ng-click inside of ng-click AngularJS
You just need to stop the event from bubbling by using stopPropagation(). <tr ng-repeat="item in items" ng-click="viewItem(item.id)"> <td>{{ item.name }}</td> <td><a ng-click="removeItem(item.id, 'item.name'); $event.stopPropagation()">Remove item</a></td> </tr> jsFiddle

Categories : Angularjs

AngularJS ng-click inside of Google Maps InfoWindow
The problem is, that you insert innerHTML not the compiled tag as content of the infoWindow. So your code is evaluated once and you pass only this compiled static content. Please try to use infoWindow.setContent(compiled[0]) instead of infoWindow.setContent(compiled[0].innerHTML)

Categories : Google Maps

What is best way to get angularjs ng-repeat variable to a directive called withn the repeat
What you are trying to do should work just fine. Here is an example... http://jsfiddle.net/HB7LU/4269/ <div ng-repeat="val in values"> <my-directive val="{{val}}">{{val}}</my-directive> You can see that the value from the repeater is easily binded into the child directive. Since you didn't provide any code, its hard to see where you are going wrong, but it might have something to do with the fact that you are using a table in your html. There was a bug in Angular, which was fixed in 1.2.13, related to repeating over table elements, since browsers actually manipulate the DOM inside of tables on their own sometimes. Please see this bug report regarding that issue. I would update to the latest version of Angular and try again. If you still can't get it working, try t

Categories : Angularjs

AngularJS Outer ng-repeat not to register watches on inner ng-repeat
You could write a directive that takes both users and items as bindings attributes (especially because it seems like your inner loop is independant from the outer one), then manually nest two loops that would add content to the DOM, plus adding a scroll listener to each element. It's more hard-way coding but a lot less watchers.

Categories : Javascript

angularjs: ng-repeat-start and ng-repeat-end with inner ng-repeat
You should be able to use index-based iterations to bypass that: <tr ng-repeat-start="obj in rows" > <td ng-repeat="e in obj.row">{{obj.row[$index]}}</td> </tr> <tr ng-repeat-end> <!-- ... -->

Categories : Angularjs

angularjs ng-click inside google maps infowindow doesn't fire
Here you go :) http://plnkr.co/edit/EbBWJQx5pOz0UyoayYFI?p=preview fixed by waiting on the "domready" of the infowindow and compiling then

Categories : Angularjs

Angular ng-repeat inside other ng-repeat?
It is simple , change it like this: <fieldset ng-repeat="fieldset in fieldsets"> {{fieldset}} <div class="pair" ng-repeat="field in fieldset.fields"> {{field}} </div> </fieldset> Plnk: http://plnkr.co/edit/ytBGgP?p=preview

Categories : Angularjs

AngularJS: ng-repeat for 2 x
It looks like the angularjs guys have implemented something along these lines. https://github.com/angular/angular.js/commit/e46100f7097d9a8f174bdb9e15d4c6098395c3f2 So the syntax would be <tr ng-repeat-start="item in items"></tr> <tr ng-repeat-end></tr>

Categories : Angularjs

Using AngularJS, which is optimal with regards to ng-repeat
After typing it out, I think the best option would be to have one tools panel, and populate it depending on which 'panel toggle' button is clicked. Fewer DOM elements the better, right? It also leave it open for lazy-loading of the extra details in the future.

Categories : Performance

AngularJS ng-repeat in this model
You can change the data model like this function Ctrl($scope) { $scope.items = [{ item1: 1, item2: 'a', item3: 'a1' }, { item1: 2, item2: 'b', item3: 'b2' }, { item1: 3, item2: 'c', item3: 'c3' }, ...]; } <div ng-app ng-controller="Ctrl"> <table> <tbody> <th>item1</th> <th>item2</th> <th>item3</th> <tr ng-repeat="item in items">{{item}} <td>{{item.item1}}</td> <td>{{item.item2}}</td> <td>{{item.item3}}</td> </tr> </tbody> </table> </div> DEMO

Categories : Javascript

why angularjs ng-repeat not working
users must refer to a property that is accessible on the current scope. Scopes are AngularJS way of tying data from and to HTML. This is explained further in the "Model and Controller" chapter of the second tutorial page. See a working version of your Fiddle here. HTH!

Categories : Javascript

How to use AngularJS ng-repeat on
You can use ng-repeat-start directive: <ul> <li ng-repeat-start="airport in airports">{{airport.code}}</li> <li>{{airport.city}}</li> <li ng-repeat-end>{{airport.name}}</li> </ul> Here it is working in plnkr.

Categories : Angularjs

Angularjs - how to use select with ng-repeat?
You need to fix a few things in your <select> element: use color.id as color.name in your ng-options. ng-options="color.id as color.name for color in colors" you typoed "colorid": ng-model="user.colorId" Here's a plunk of it working: http://plnkr.co/edit/DptvZuamWv9waFzI0Rcp?p=preview

Categories : Angularjs

AngularJS "headers" in ng-repeat
Create an Angular filter. It can accept the sorted list, chunk it by first letter and return an object for each chunk with the letter and an array of objects that start with that letter. See for example the chunk by size filter here. Note in particular the discussion around creating hash values for your chunked values.

Categories : Javascript

AngularJS ng-repeat not working?
You are missing a call to $apply() because you are doing work outside of the angular world so try to add one line below push command and it should work angular.forEach(followers, function(follower, index){ $scope.results.push(follower); }); $scope.$apply()

Categories : Javascript

Filter ng-repeat on Angularjs,
<tr ng-repeat="data in dataset | filter:filterFunction"> <td>{{data.id}}</td> <td>{{data.name}}</td> </tr> Controller: $scope.filterFunction = function(data) { return $scope.filterValues.indexOf(data.id) !== -1 ? true : false; }; $scope.filterValues = [12, 14, 23];

Categories : Angularjs

AngularJS - ng-click does not remove previous click's modifications when clicked again
Since each single question has its own QuestionController, and QuestionControlleris where $scope.selected is being set, they don't interact with each other. That is to say, when you click edit, it sets selected for that individual controller. The easy way to fix it would be to set a property on a parent scope (the containing controller) when clicking edit: function MyCtrl($scope) { $scope.questions = []; $scope.AddRootQuestion = function(questions) { questions.push({name: 'Question', nodes: []}); }; // added this method --v $scope.setSelected = function(q) { $scope.selected = q; }; } function QuestionController($scope) { $scope.choices = []; $scope.choice = {text: ''}; $scope.AddSubQuestion = function(question, $element) {

Categories : Angularjs

How to update ng-click value in ng-repeat?
<div ng-repeat='element in elements'> <input type="button" ng-click="element.clickedAction()" /> </div> Presuming that clickedAction is a function on your element in the elements array. $scope.elements = [ { clickedAction: function () { /* do something */ } }, { clickedAction: function () { /* do something */ } }, { clickedAction: function () { /* do something */ } } ]; This is an unusual scenario though. More often people will be doing something like this: $scope.doSomething = function(item) { item.name += '!'; }; $scope.items = [ { name: 'test' }, { name: 'foo' }, { name: 'bar' } ]; <div ng-repeat="item in items"> <button ng-click="doSomething(item)">Click Me</button> </div>

Categories : Json

Angularjs ng-repeat item for tag attributes
You can use <li data-theme="{{ item.dataTheme }}" ng-repeat="item in items">{{ item.name }}</li> Demo: Fiddle

Categories : Javascript

2-way binding not working in AngularJS repeat
I'm not sure I understand the question but here is some working code that maps the first ng-repeat to records and the second ng-repeat to records2. Is this what you are trying to accomplish? The second ng-repeat was attached to mainCtrl and did not have an inc function on the scope. I set the second to use itemCtrl2 controller. <body ng-app="test1"> <div> <div ng-controller="mainCtrl"> <div ng-repeat="record in records" ng-controller="itemCtrl"> <span>{{record.val}}</span><a ng-click="inc()">inc</a> </div> <p></p> <div ng-repeat="record in records2" ng-controller="itemCtrl2"> <span>{{record}}</span><a ng-click="inc()">inc</a> &

Categories : Javascript

AngularJS ng-repeat + SVG binding Bug in IE10?
You're re-using (and therefore, overwriting the previous version each time) the item variable because you don't create a newly scoped version of it: var demoItem = function (cnt, color) { item = {}; <-- here ... Use this instead: var demoItem = function (cnt, color) { var item = {}; ...

Categories : HTML

How do I break on values using AngularJS ng-repeat?
So you'll need some functionality to get a list of the distinct pms <div ng-repeat="pm in distinctPms"> {{pm}} <ul> <li ng-repeat="name in items | filter:{pm: pm}"> {{name.name}} </li> </ul> </div> function SimpleController($scope) { function distinctPm() { var unique= []; for (var i = 0; i < $scope.items.length; i++) { if (unique.indexOf($scope.items[i].pm) == -1) { unique.push($scope.items[i].pm) } } return unique; } $scope.items = [ {id: 1, name: "Project 1", pm: "msmith"}, {id: 2, name: "Project 2", pm: "msmith"}, {id: 3, name: "Project 3", pm: "msmith"}, {id: 4, name: "Project 4", pm: "sjones"}, {id: 5, name: "Project 5", pm: "sjones"} ];

Categories : Javascript

angularjs custom filter in ng-repeat
After some discussion, the answer was to avoid overwiting existing data by adding a check around the first section of logic like this: if(!(obj.Ticker in tags)){ tags[obj.Ticker] = {id: obj.TickerID, name:obj.Ticker}; if(!tags[obj.Ticker].pending){ tags[obj.Ticker].pending = 0; } if(!tags[obj.Ticker].settled){ tags[obj.Ticker].settled = 0; } if(!tags[obj.Ticker].order){ tags[obj.Ticker].order = 3; } }

Categories : Javascript

AngularJS Bootstrap UI btn-checkbox in ng-repeat
The answer you linked is the same solution for this problem. Each button within the repeat needs it's own unique property of the model. If they are all set to the same model, as in the plunk $scope.checkboxModel = {id: 0}, when one button is checked, they will all be checked. So to give each button uniqueness, you could set another property onto the objects within the ng-repeat. This property would hold a boolean value that changes on check. So your model would look like: $scope.companies = [{"id":2,"name":"A", truthy:false}] // and so on You would not need to explicitly set this in the controller - just declare the new property right in the button element's model: <companies ng-repeat="company in companies"> <button type="button" class="btn" ng-model="company.truthy"

Categories : Angularjs

Angularjs: greater than filter with ng-repeat
Create the filter as a filter service using the angularjs filter api, and add minPrice as a parameter. filter('priceRangeFilter', function ( location ) { return function ( location, minPrice ) { ... } }) and in the template <div ng-repeat="m in map.markers | priceRangeFilter:minPrice"> See an example in this fiddle: http://jsfiddle.net/Zmetser/BNNSp/1/

Categories : Javascript

Initializing select with AngularJS and ng-repeat
As suggested you need to use ng-options and unfortunately I believe you need to reference the array element for a default (unless the array is an array of strings). http://jsfiddle.net/FxM3B/3/ The JavaScript: function AppCtrl($scope) { $scope.operators = [ {value: 'eq', displayName: 'equals'}, {value: 'neq', displayName: 'not equal'} ] $scope.filterCondition={ operator: $scope.operators[0] } } The HTML: <body ng-app ng-controller="AppCtrl"> <div>Operator is: {{filterCondition.operator.value}}</div> <select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators"> </select> </body>

Categories : Javascript

Can I use ng-repeat to iterate over an array in AngularJS?
your edit is heading in the right way, you can iterate through a list of integers easily, the you just use the value of you index like that <div ng-repeat="t in [3,4,5,6,7,8]"> .... data-ng-model="modal.data.answer[t].text" ... I made a fiddle if you want to try http://jsfiddle.net/DotDotDot/tweyS/ (the input field is just here to change the selected value, as in your code sample, in order to display the right fields) have fun

Categories : Angularjs

Angularjs: ng-repeat + ng-switch-when != expected
The ng-switch-when tag requires a constant, you can't put a variable in it. You can rework your code as follows: <div ng-repeat="solution in solutions"> <div ng-show="current == solution"> {{solution.content}} </div> </div>

Categories : Angularjs

Angularjs 1.2: include template in repeat
spooky-giraffe (v 1.2) is not a production release. Many of the jsfiddle and plunker examples found in the docs.angularjs.org pages no longer work since those examples auto-updated to version 1.2. There are many feature updates and bug fixes in version 1.2, including a complete rewrite of ngAnimate, but still much work to be done before it becomes a stable release.

Categories : Angularjs

AngularJS ng-repeat filtering with an OR-statement
Your only options is to use a filter using a function: <ul> <li ng-repeat="company in companies | filter:customFunction"> {{company.name}} </li> </ul> Where $scope.customFunction = function(item){ /* true if you want item, false if not */ } Source: http://docs.angularjs.org/api/ng.filter:filter#parameters

Categories : Angularjs



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.