Using ng-click to toggle between two functions
javascript,angularjs,angular-ui,angular-ui-bootstrap
You can create a toggle() function which will call the function you want based on a variable tracking the state. You can then simply use this function in your template as ng-click="toggle()". Something like this. var toggled = false; $scope.toggle = function() { if (toggled) { $scope.clear(); } else {...
Toggle Class to select offer with angular
I have edit your code and when you select one it will add a class to that selected div and those other will not have that 'popular' class. $scope.selected = { id: 0 }; ng-class="{'popular': selected.id === abos.id }" http://codepen.io/anon/pen/EjbKQe?editors=101...
Create angular page in Django to consume data from JSON
angularjs,django,django-templates
You can add the angular app as a simple template view in Django views.py def index(request): return render(request, 'yourhtml.html', {}) urls.py .... url(r'^your_url/$', views.index), .... Then the index.html file can have your angular code...
AngularFire pushing to array doesn't work
javascript,arrays,angularjs,firebase,angularfire
You only need to call $save on $firebaseObject instances. In fact the call to $save might well break things, since it triggers a potential race condition between the push and the $save. Update This will work: groupControllers.controller('MemberGroupController', ['$scope', '$firebaseArray', '$routeParams', '$location', '$routeParams', function($scope, $firebaseArray, $routeParams, $location, $routeParams) { $scope.groups =...
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:...
Security features in angularjs
You can enable AngularJS CSP support. More details here. Sample code below: <!doctype html> <html ng-app ng-csp> ... ... </html> ng-csp forces you not use code that can be injected like eval and Function. ng-sanitize from doc. The input is sanitized by parsing the HTML into tokens. All safe tokens...
text formatting with AngularJS
Angular doesn't allow you to display html right away, you have to say that it's trusted so change your success to this (make sure you have dependency injected $sce): $scope.fullArticle = response; for(var x = 0; x < $scope.fullArtcile.length; x++){ $scope.fullArticle[x].trustedBody = $sce.trustAsHtml($scope.fullArticle[x].body) } And then make your html this:...
Is there a way to fire an event every time an ajax call in made in AngularJS?
javascript,ajax,angularjs,express
In Angular this can be solved with an interceptor. See Angular-loading-bar as example.
Improve slow angular directive
javascript,angularjs,angularjs-directive
The slowness you're experiencing could be due to the fact that after the window has been resized, a digest cycle isn't triggered. The fact that the view changes as all I suspect is due to the fact the digest cycle is later triggered by something else. To fix this, you...
String comparison in AngularJS
javascript,json,angularjs,ionic-framework,string-comparison
You are iterating over wrong node:) for(var i=0;i<$rootScope.items.length;i++) { alert("Inside for loop"); if (name === $rootScope.items[i].names) // you iterate over items, not names, which it an Json property inside item { alert("If condition satisfied"); } } ...
Angular error i dont understand?
The problem is you are using ng-bind-html-unsafe which has been deprecated form Angular 1.2+, you should replace it with ng-bind-html then you need to sanitize that html using $sce service using $sce.trustedAsHtml method. For that you should write your custom filter and apply that filter wherever you want display an...
Using indexOf() to search array inside ng-repeat
The problem here is the data type of the values, the read_by array has int values where as member.id is string. One easy fix is var app = angular.module('my-app', [], function() {}) app.controller('AppController', function($scope) { $scope.isRead = function(member) { return $scope.message.read_by.indexOf(+member.id) > -1; } $scope.message = { read_by: [1, 2,...
How to use a service with Http request in Angular JS
ofcservices.getnews() is a promise You need manage with the function sucess and error ofcservices.getnews(). success(function(data) { $scope.news=data }). error(function(data, status, headers, config) { //show a error }); As weel change app.factory('news' to app.factory('newsFactory' and call it in controller('news', function($scope, newsFactory) { You can get more data about promise in the...
$rootScope is undefined in $urlRouterProvider.otherwise
From urlRouter source codes * @param {string|object} rule The url path you want to redirect to or a function * rule that returns the url path. The function version is passed two params: * `$injector` and `$location` services, and must return a url string. * * @return {object} `$urlRouterProvider` -...
Passing argument to a factory for a service
A factory creates an object and returns it as the publically available operations. So, you can create and return an object that wraps the HTTP call: app.factory('getUser', ['$http', function($http) { function myInternal(arg1) { return $http.get('https://myUrl?param=' + arg1) .success(function(data) { return data; }) .error(function(err) { return err; }); } return {...
AngularJS use a directive inside a ng-repeat
I would do something like this: Markup: <div ng-app="myApp"> <ul id="todo-list" ng-controller="Ctrl"> <li ng-repeat="x in todo"> <ng-form name="repeatForm" highlight=""> <button ng-click="open()">{{x.doc._id}}</button> <label class="label label-info">{{x.doc.Name}}</label> <span>{{x.doc.Address1}}</span> <span>{{x.doc.Address2}}</span> <span name="expDt" past-date="">Expiry Date: {{x.doc.IssueDtto}}</span> <span class="help-block"...
AngularJS dynamically call function
seems like you have missed the argument for the controller method in the HTML // you have missed the event parameter. <input type="text" ng-model="value" ng-enter="hideToolTip(event)" /> app.directive('ngEnter', function() { return function(scope, element, attrs) { element.bind("keydown keypress", function(event) { if (event.which === 13) { console.log(attrs.ngEnter); scope.$apply( scope.$eval(attrs.ngEnter, { 'event': event })...
Angular controller error: 'Controller is not a function, got undefined'
javascript,angularjs,angularjs-controller
controller() is itself a function to be called, not a property to be assigned as you're doing. Try this instead: var app = angular.module('TourneyTime', ['ionic']); app.controller('HomeController', function($scope) { $scope.players = "testing"; }); ...
Display unlisted value in select with ng-options
Interesting problem. I think that you will be able to achieve this with the combination of ngInit directive to set up initial value (it can be missing from the allowed options list) and ngShow to hide it once valid option is selected. Something like this: <select ng-init="preselected = selected" ng-change="preselected...
Angular directive not applied on change of the value
javascript,angularjs,angularjs-directive
In your code, the link function is executed only once so the value is updated only when the directive instance is created. Since you want to have a watch of its value and keep updating the text you can use $observe() var app = angular.module('my-app', [], function() {}) app.controller('AppController', function($scope)...
angular.js - simplest way to handle click inside controller
javascript,jquery,html,angularjs
You don't really want to handle any DOM stuff in controllers (a controller just ties data to the view, which happens to be the DOM). You want to use a directive for DOM manipulation. (However, yes, ng-click is a built-in directive that can run methods inside the controller). If you'd...
How to add class on ng-click?
If your using classes like active-link, x-y which have dash (-) then you have to wrap it in ' as below. ng-class="{'active-link' : activeLink==='PersonalInfo'}" if your classes like activeLink which are doesn't have dash (-) then you can avoid from ' but not a must. ng-class="{activeLink : activeLink==='PersonalInfo'}" here is...
AngularJS: Adding ng-click within element.append
You should compile the html to bind the directives like ng-click to scope properties. Other vice angular directives will not bind to the scope properties. var strElm = '<button class="btn btn-info" ng-click="selectProperties()" title="Assign this user"><span class="glyphicon glyphicon-user"></span>Assignment</button>'; var compiledHtml = $compile(strElm); element.append(compiledHtml); and don't remove $compile service from directive, and...
Add multiple rows from same model AngularJS
You should have an array of users in your controller and every time you press "Add another user" you can add a new user to your array. The code in your controller: $scope.users = [{ name: "1" , email: "email1", password:"pas1" }, { name: "2" , email: "email2", password:"pas2"}];; $scope.addUser...
Passing params to an angular service from a controller?
javascript,angularjs,service,controller,params
You can declare your service as: app.factory('books', ['$http', function($http) { // var url = 'http://...' + ParamFromController + '.json' return { getVal: function(url,options){ return $http.get(url,options) } } }]); and use it in your controller and provide appropriate params to pass into 'books' service: app.controller('BookController', ['$scope', '$routeParams', 'books', function($scope, $routeParams, books)...
Is there a before() function in Protractor?
angularjs,node.js,automated-tests,protractor,hierarchy
My solution to this problem was to split the two describe blocks in to 2 separate spec files. I figured this made more sense anyway, as each test had different conditions it needed to meet, and it isn't much hassle to have extra spec files.
success and error function in the controller for a service
javascript,angularjs,angularjs-service,angularjs-http,angularjs-promise
..I want to write the success and error function of $http.get in the controller.. Usually, the .then() function takes two function arguments with first one as the success handler and seconf one as error handler. $http.get(url,options).then(function (response){ //success handler function },function(error){ //error handler function }) Alternatively, you can specify...
Programmatically enable GPS of device when application opens in cordova
angularjs,cordova,ionic,cordova-plugins
You could check the error code in PositionError parameter of geolocationError in your call to getCurrentPosition. I am guessing that it will be PositionError.PERMISSION_DENIED when gps is not enabled, and PositionError.POSITION_UNAVAILABLE or PositionError.TIMEOUT when gps is enabled but there are other issues. Note that this is platform dependent. You would...
navbar disappears but no dropdown
This is built into bootstrap already. Viewing the html for bootstrap.com I see their button looks like this: <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> with the button they have data-target="#bs-navbar". "#bs-navbar" refers to...
Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG
javascript,angularjs,restangular
You didn't inject module of 'Restangular' service. Try like this angular.module('AngApp', ['angularGrid','restangular']); ...
HTML elements in Angular bindings expression
You could use ng-show, it will show the paragraph if employee.firstname is null. <tr ng-repeat="employee in employees"> <td>{{employee.firstname }}<p ng-show="!employee.firstname" style="color:red">No name</p></td> <td>{{employee.job}}</td> </tr> ...
Uncommon “10 $digest iterations reached” case
To answer your question directly, you can change the number of digest cycles as follows: app.config(function($rootScopeProvider){ $rootScopeProvider.digestTtl(20); }); But, I am cautious to recommend this as a general approach since, in all likelihood, the problem lies elsewhere your code (which is not specified in the question) and it just manifests...
ngOption default selected option
angularjs,angular-ngmodel,angular-services,angularjs-ng-options
You have ng-options="product as product.formattedPrice+' - '+product.variantQualifierName for product in item[0] track by product.url" And $scope.productSelect = $scope.item[0]; So either you're trying to select out of one option or you're initializing your productSelected to the same array....
Can rspec be used to feature test an integrated rails-angular app?
ruby-on-rails,angularjs,rspec,capybara
My guess is that your create(:fighter) call is running in a different thread (and database transaction) than the AJAX get request. Try adding this snippet to your rails_helper. class ActiveRecord::Base mattr_accessor :shared_connection @@shared_connection = nil def self.connection @@shared_connection || retrieve_connection end end ActiveRecord::Base.shared_connection = ActiveRecord::Base.connection Source: https://github.com/jnicklas/capybara#transactions-and-database-setup...
remove char from string with angular
Just use replace: If v_value is a string: value: {{item.v_value.replace('.', '')}} If v_value is a number, "cast" it to a string first: value: {{(item.v_value + '').replace('.', '')}} Basically, you can use JavaScript in those brackets....
ReferenceError: Invalid left-hand side in assignment using OR
|| binds stronger than = (see https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) So you need put to parentheses around the (valided = false). Otherwise it first evaluates to e.g. ('' || undefined) and then attempts to assign false to this expression....
validation of AngularJS direcrives
angularjs,html5,html-validation
data- prefix can be used by any directive and the underlying directive name normalization process takes care of matching the directive attribute declaration with the directive implementation. More details about the normalization process is available in the directive user guide under section "Matching Directives". Hence adding data- prefix to to...
function is undefined if no module is declared in Angular
1st one you used is nothing but global function declaration of controller, in which you declare controller as function. To analyse the Angular the function should be treated as controller we need to use post-fix as Controller. The reason it is not working because you are using Angular 1.3 +...
How to define style to layout-margin flex variants, using Angular Material
css,angularjs,angular-material
Angular material doesn't add or remove the attributes based on the browser size, so both [flex] and [flex-sm] will always be on your element. That is why they both apply, you will have to write a media query with the same break point as angular material if you want to...
How to access HTML variable in Java-script in angularJS
Change your html to this: <select class="form-control" ng-model="NewProduct.category" ng-options="category as category.name for category in Categories | orderBy:['name']" ng-change="update(NewProduct.category)" required></select> This will store the entire category in NewProduct.category instead of just the id...
Calling AngularJS function from a remote page loaded by Bootstrap modal
javascript,angularjs,twitter-bootstrap
You don't need to create two 'ng-app'. With only two controllers but with the same ng-app, you can do the job. Can you try something like this : (EDIT: the code bellow doesn't works) <div ng-controller="saveFormController"> <div class="modal-header"> <button class="close" data-dismiss="modal" type="button"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> </div> <div class="modal-body">...
AngularJS - $scope undefined within same controller
This is an order of operations issue. When you console.log($scope.weather[0].latitude) in the if statement $scope.weather has not actually been set yet because the City.get() call is asynchronous. This means $scope.weather will not be set until a successful response is returned from the City service, which in your case will execute...
Angular: On button click to invoke controller
You can achieve this by using angular's $broadcast and $on methods to dispatch and listen for an event. First, update the markup of the selector to broadcast an event when selecting a schedule: <li><a ng-click="updateSchedule(value)">{{name}}</a></li> Second, in schedule-dropdown-controller inject $rootScope into your controller and add the updateSchedule method so the...
Cannot read property 'then' of undefined - AngularJS
Your service method does not return the promise of what Resangular.all().post() is supposed to return. Its a q promise. register: function (registerData) { this.logout(); return Restangular.all('api/account/register').post(registerData); //return $http.post("api/account/register", {data:registerData}) } ...
Change input field in angularJS
Use preventDefault when 'b' was pressed. self.keyPressFunc = function(eventa) { self.eventa = eventa; if (eventa.charCode == 98) { // if 'b' self.testValue = "y"; eventa.preventDefault(); } }; ...
calling one controller from another controller
You can normally use the controller in the modal open function but the controller2 must be in same module that controller1 belongs: angular.module('myModule').controller('controller1', ['$scope', myModuleController1]); angular.module('myModule').controller('controller2', ['$scope', myModuleController2]); or else you have to make your dependencies right in your app.js file if your controllers belong to separate modules myModule1, myModule2:...
Angular $http and Fusion Tables in IE9
javascript,angularjs,internet-explorer-9,google-fusion-tables
You should use the Angular $http.jsonp() request rather than $http.get(). JSONP or “JSON with padding” is the communication technique which allows for data to be requested from a server under a different domain (also known as a Cross Origin Request). Which is what you have used in your jQuery AJAX...
Angularjs $watchCollection on $rootScope not triggered when values updated from directive
javascript,angularjs,events,angularjs-directive,angularjs-watch
Your actual problem is you are update $rootScope from the event which is outside the angular context, so its obivious that angular binding will not update because digest cycle doesn't get fired in that case. You need to fire it manually by using $apply() method of $rootScope el.bind('click', function(evt) {...
AngularJS - binding/linking two directives together
javascript,angularjs,angularjs-directive
The key issue revolves around your use of isolated scopes: scope: { selectedId: '=' }, With controllerAs binding: controllerAs: 'vm', What this essentially does, to put it basically, is it places the view model onto the directives scope, accessed through the alias you assign in the controllerAs. So basically in...
Angular submit not called when required fields not filled
You need to add novalidate to your form. The reason being, your browser is validating your form rather than letting your code do it. alternatively, do something like: <form ng-submit="submit()" name="form" novalidate> <ion-radio ng-repeat="item in items" ng-model="data.type" name="type" ng-value="item.value" ng-class="{'error' : form.type.$invalid && form.$submitted }" </form> form.$submitted will become true...
$scope variable does not update within $interval function
javascript,angularjs,angularjs-scope
The problem is probably not using a dot in ng-model. There probably is an inherited scope being created by a parent node which contains the HTML posted in the question. See also: AngularJS: dot in ng-model AngularJS: If you are not using a .(dot) in your models you are doing...
How push object onto array of array in Angularjs
Actually instead of adding properties dynamically you should rethink the structure of the allBooks object you're trying to create. The way I understand it, is that you have a collection of books belonging together, which in their turn belong to another collection. In other words you have an array of...
What is the difference between these two angularjs controller definition
angularjs,angularjs-controller
First one cares about minification. In this controller: myApp.controller('GreetingController', function($scope) { $scope.greeting = 'Hola!'; }); arguments will be minimized to some short values and dependency injection will not work. Please look at: https://docs.angularjs.org/guide/di#dependency-annotation https://docs.angularjs.org/tutorial/step_05 What are the differences in angular controller notation? ...
Animate removal of list items with css
css,angularjs,css3,animation,css-animations
The idea is to set the height of container and add transition to the height. $scope.styles.height = $scope.messages.length * 20 + 'px'; http://plnkr.co/edit/3dnGeVoQ1DbX55WQtJjk?p=preview...
How can this be undefined in the constructor of an Angular config class?
angularjs,constructor,typescript,undefined,this
Config functions aren't classes and shouldn't be written as such. Angular is invoking them without new and thus this will be undefined (or, God help you, window in non-strict mode). It doesn't really make sense to use a class here as there's no instance to be kept around. If you...
Pre-Select of an option in a select not working
Bind value in model to get selected. Try like this $scope.rule.condition=$scope.conditions[0].value; ...
Check if expression in directive is defined?
You can do it in the link function of the directive as below: return{ restrict: 'E', scope: { func: "&?" }, controller: 'directiveCtrl', controllerAs: 'vm', bindToController: true, link:function(scope,element,attrs){ if(attrs.func) { attrs.$observe('func', function(value) { console.log(value); }); } } ...
How do I add a class on ng-click from layout?
In your plnkr the css for active-link was missing, and I wrapped the assigning of the clicked link in a function. Check this updated plnkr. The function is pretty basic: $scope.changeActiveLink = function(link) { $scope.activeLink = link; } Now the links are green when clicked. This is what you wanted...
Angular ng-repeat cache (avoid re-rendering on state change)
javascript,angularjs,performance,caching,angularjs-ng-repeat
Well if you disable the scope of the scope that the ng-repeat is on. Then it will no longer render. It essentially becomes static content. This allows you to actually control when it is rendered. ux-datagrid actually uses this concept to turn off dom that is out of view so...
Compare two arrays to get count of properties
Here is a generic approach. You provide the data and the field you want to count. var data = [ { name: 'Jon', age: 34 }, { name: 'Steve', age: 33 }, { name: 'Mark', age: 34 }, { name: 'Jon', age: 35 } ]; function countUnique(items, property) { return...
AngularJS line break at points after a maximum length was reached
Write a custom filter: angular.module('filters', []).filter('lineBreaker', function() { return function(input, breakLength) { var newString = ""; for (var i = 0; i < input.length; i++) { newString = newString+input[i]; if (i%breakLength == 0) { newString = newString+"\n"; } } return newString; }; }); Called like: {{ expression | lineBreaker: 10...
Provider dependancy not working in Config AngularJS
Whenever you get an angular error and you could not really decode what error message means. Try to load non min version of angular and that will provide you a more descriptive error message, for example in your case you might see something like: Uncaught Error: [$injector:modulerr] Failed to instantiate...
How do I update a view after ng-submit calls a factory function?
The code is working, but the repsonse does not have the assumed properties when the city is not provided or wrong city is provided. So maybe use ng-required, as the code will fail if the postData.city is not set http://plnkr.co/edit/7F3EUMyAXtAlBR9CGWb0?p=preview .success(function(data) { console.log(data); $scope.test = 'This is the NEW value';...
angular filter in order by letter
javascript,angularjs,angular-filters
You are re-inventing the wheel. Checkout angular build-in filter for ng-repeat https://docs.angularjs.org/api/ng/directive/ngRepeat <li ng-repeat="page in pages | filter:x"> Reading your code more thoroughly I think you have some misunderstanding of angular logic there as well. For example, you don't need extra function to detect search change and then getting the...
how to get ng-repeat checkbox values on submit function in angularjs
<div ng-repeat="item in items"> <input type="checkbox" ng-model="item.SELECTED" ng-true-value="Y" ng-false-value="N"/> </div> <input type="submit" name="submit" value="submit" ng-click="check(items)"/> $scope.check= function(data) { var arr = []; for(var i in data){ if(data[i].SELECTED=='Y'){ arr.push(data[i].id); } } console.log(arr); // Do more stuffs here } ...
AngularJS & Bootstrap Modal - loading template outside controller
angularjs,twitter-bootstrap,angular-bootstrap
A good way to reuse your template is to put it in a separate html file and put its url in templateUrl. So $modal can get it from server every time needed.
AngularJS factory dependencies
javascript,html,angularjs,mongodb
DOCS Change your factory to service as you are using this factory return an object or primitive type not bind with this app.services('articleFactory', ['$q', '$http', function ($q, $http){ this.getAllArticles = function (){ var deferred = $q.defer(), httpPromise = $http.get ('/entries'); httpPromise.success (function (data){ deferred.resolve (data); }) .error (function (err){ console.log...
Getting CROS Error even after adding header in node.js for Angular js
The error message spells it out for you. Your client side code is trying to set an Access-Control-Allow-Origin header: RestangularProvider.setDefaultHeaders({"Access-Control-Allow- Origin":"*"}); Your server side code allows a number of headers, but that isn't one of them: 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept"', Remove the line: RestangularProvider.setDefaultHeaders({"Access-Control-Allow- Origin":"*"}); Access-Control-Allow-Origin is a response...
Updating View in Angular js on ajax success callback
Your code correctly performs a GET request to inactivate the offer, however you do not "tell" Angular that the offer has been inactivated. What you need to do is remove the offer from the offers list $scope.offers once the offer is successfully inactivated (ie. when the inActivateOffer promise is resolved)....
recursive function with an array as input
Modify your function to this, function getChest(arr){ var pointer = 0; //random array pointer pointer = Math.round(Math.random() * (chest.length - 1)); //check for duplicate for(var i = 0; i < arr.length; i++){ if(arr[i].name === chest[pointer].name){ return getChest(arr); } } return chest[pointer]; }; Basically, the loop is breaking before the value...
I want to add an element inside an array, but not getting how to do this using angular
From the picture above I see that subChild is an object and not an array. So there are no functions like push() or concat() for an object. You can add a property to it like this childBD[i].subChild.busDomain = busDomain;
Pass scope to element.after()
You could try creating an angular element and compiling it against the scope you want it to have with $compile e.g. var newElement = angular.element('<div data-autocomplete-results></div>'); element.after($compile(newElement)(scope)); Also you would need to do this in the link function, as scope is unavailable during the compile phase of the digest cycle....
Change placeholder value depending on locale - angularJS
If you just want to switch between german and the rest of the world, you can have something specific in your controller: <input placeholder="{{getLocalePlaceholder()}}"> Controller: $scope.getLocalPlaceholder = function() { if ($local.id === 'de-de') { return 'TT/MM/JJJJ'; } return 'mm/dd/yyyy'; } If you want to be more generic, I suggest you...
Socket.IO message doesn't update Angular variable
javascript,angularjs,node.js,sockets
You need to wrap the change of the model (changing properties on the $scope), with $scope.$apply(function() {}) in order to to update the view. var container = angular.module("AdminApp", []); container.controller("StatsController", function($scope) { var socket = io.connect(); socket.on('message', function (msg) { console.log(msg); $scope.$apply(function() { $scope.frontEnd = msg; }); }); }); $apply()...
REST API with token based authentication
angularjs,codeigniter,api,rest,token
You can use an API key, however - as you wrote - it's pure protection and easily accessible value - potential abuser just needs to view the source or investigate the queries. In general REST APIs are secured with tokens. At the beginning of the session (not in traditional meaning...
Angular Js Drag and Drop - Passing $index to Directive
javascript,angularjs,drag-and-drop
There are quite a few problems with your code. I'd suggest studying the official documentation and some SO questions related to custom directives and isolate scopes. Here is some updated code with many changes and an updated fiddle: <body ng-app="my-app"> <div ng-controller="MainController"> <h3>Match the following</h3> <div class="container"> <header> <h1>Drag and...
Getting generic anchor text on click with angularJS/jQuery returns empty string
You are mixing jquery with angular logic with var title = $(this).text(); . You shouldn't try to do this. the $("this") is not referencing what you think it is in that context. You could try logging it to see what I mean. Instead, just pass back the object ng-click="findArticleByTitle(article)" then...
How to disable the form submit when input fields are incorrect in angularjs
You appear to want all fields to be required, but that when users think they're ready for form submission, they are kindly notified if they have forgotten any required fields. Normally this is achieved with ng-submit and something like: <span ng-if="myForm.$submitted && myForm.formField.$error.required">Please enter information for 'formField'</span> Here the users...
Merge and sum values and put them in an array
javascript,arrays,angularjs,foreach
You cannot store key-value pair in array. Use object to store key-value pair. See comments inline in the code. var obj = {}; // Initialize the object angular.forEach(data, function(value, key) { if (value.start_date > firstdayOfWeek && value.start_date < lastdayOfWeek) { if (obj[value.firstname]) { // If already exists obj[value.firstname] += value.distance;...
Save to 3 firebase locations with a slow internet connection
javascript,angularjs,firebase,latency
There is no Firebase method to write to multiple paths at once. Some future tools planned by the team (e.g. Triggers) may resolve this in the future. This topic has been explored before and the firebase-multi-write README contains a lot of discussion on the topic. The repo also has a...
How to select multiple selected value from select option
angularjs,model-view-controller,ionic-framework,ionic
Here is the jsfiddle I used ng-repeat to build the select and ng-options to fill them, you then have to use the relative ng-model to get the selections. HTML: <div ng-app ng-controller="MyCtrl"> <select class="select fancy" ng-repeat="(i, item) in items" ng-model="searchOption[i]" ng-options="type.name for type in item.types"></select> <button ng-click="submitIt()">Submit</button> </div> Javascript: function...
UI-Router : Prevent access to parent state
angularjs,angular-ui-router,state
There is a working example Make your state abstract: .state('app', { url: '/app', abstract: true, // here template: ' <div ui-view></div>', authenticate: true }) And add some default redirections: $urlRouterProvider.when('/app', '/app/state1'); $urlRouterProvider.otherwise('/app/state1'); The first 2 links below will redirect to 'app.state1' <a href="#/app"> // will be redirected to state1 <a...
Value lookup on the fly in angular
You can create a function (e.g. getPostitOwner) on the scope that accepts an id as its param and returns the owner. You'd use it like this: <td><small>{{ postit.type }}</small></td> <td><small>{{ getPostitOwner(postit.owner).userName }}</small></td> As for the lookup function implementation: $scope.getPostitOwner = function (id) { for (var i = 0; i <...
Ionic tabs : child view not showing
angularjs,angular-ui-router,ionic-framework,angular-ui,ionic
There is a working plunker It seems there is/are just a typo(s). And not just one! The first (already fixed in an edit of question) views : { 'tabs-users' ...} should be views : { 'tab-users' ...} The starting tab- instead of tabs- .state('tab.users', { url: '/users', views: { 'tab-users':...
Can't save json data to variable (or cache) with angularjs $http.get
json,angularjs,web-services,rest
$http.get is asynchronous. When cache.get or return result are executed, HTTP request has not completed yet. How are you going to use that data? Display in UI? E.g. try the following: // Some View <div>{{myData}}</div> // Controller app.controller('MyController', function ($scope) { $http.get('yoururl').success(function (data) { $scope.myData = data; }); }); You...
Angularjs resource with scope parameter
javascript,asp.net-mvc,angularjs,single-page-application
If this is an AJAX call then the varialble initialization should be into the callback methods: Fakturi.fakturi.get({ id: $routeParams.id }, function (data) { $scope.faktura = data; }); Fakturi.komintenti.get({ id: $scope.faktura.KomintentID }, function (data) { $scope.komintent = data; }); According to this link, if you would like to get response immediately...
jquery append() is creating two div elements
javascript,jquery,json,angularjs,jquery-ui
Since you have used angularjs, use a angularjs solution <div class="content-wrapper" ng-controller="mission_visionCtrl"> <div class="container-fluid"> <div id="header-wrapper" class="container"> <div id="header" class="container"> <div id="logo"> <h1 class="page-head-line" id="visionh"><a>Vision</a></h1> <p id="visionp"><a rel="nofollow">{{visiontext}}</a></p> </div> </div> </div> <div class="row" id="missionstart"> <div...
ng-repeat not working in md-chip
with angular 1.3.15 / angular-material 0.9.8, the following works here: in the controller: $scope.myNumbers = [ 1, 2, 3 ]; in the HTML: <md-chips ng-model="myNumbers" readonly="true"> </md-chips> ...
Angular-strap data-trigger='focus' not working
javascript,html,angularjs,angular-strap
You can add a tabindex attribute to make a <span> focus-able. This also applies for <div> and <table> elements. The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position....
$http.get returns actual php script instead of running it (yeoman, grunt)
Change $http.get('/scripts/php/articles.php') to $http.get('http://YOURDOMAIN.COM/scripts/php/articles.php') Off course you need to replace YOURDOMAIN.COM with localhost or any other domain you are using....
ng-Repeat returning undefined within $scope.$watchCollection
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, Animate on change: directive $watch not called
javascript,angularjs,angularjs-directive
You need to change the first argument on the $watch, to be a function returning your variable, instead of the variable itself: scope.$watch(function () { return scope.animateWatch; }, function (nv, ov) { call(); }, true); Take a look here at the docs at the watch section....
how to call the application titles and other static messages from a service?
var serviceModule = angular.module('abc'); serviceModule.factory('PostMeetUpService', function () { var myMtpData = {title: "Post MeetUp",error: "*Required"}; return { getMyMtpData: function () { return myMtpData; } } }); var controllerModule = angular.module('xyz', ['abc']); controllerModule.controller('postCtrl', post); post.$inject = ['$scope', '$state', 'PostMeetUpService', '$stateParams', 'Event', 'Terminal', 'PostService', 'Auth', 'Profession', 'growl', '$ionicPopup', '$filter', '$ionicModal']; function post($scope,...