How to Programming with Angularjs

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...

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:...

Provider dependancy not working in Config AngularJS

angularjs,config

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...

AngularJS, Animate on change: directive $watch not called

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....

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

angularjs,ng-repeat

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:...

Change input field in angularJS

javascript,angularjs,drag-and-drop

Use preventDefault when 'b' was pressed. self.keyPressFunc = function(eventa) { self.eventa = eventa; if (eventa.charCode == 98) { // if 'b' self.testValue = "y"; eventa.preventDefault(); } }; ...

Angular Js Drag and Drop - Passing $index to Directive

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

jquery,angularjs

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...

Using indexOf() to search array inside ng-repeat

javascript,angularjs,indexof

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,...

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...

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()...

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.

HTML elements in Angular bindings expression

html,angularjs

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> ...

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 } ...

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...

Display unlisted value in select with ng-options

angularjs,angularjs-directive,kendo-ui,angularjs-compile,kendo-tooltip

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...

KendoUI Popover $compile issue

This isn't problem with kendoui-popover. The problem is unneeded scope.$apply kendo does in widgets. They will remove that in newest version: Forum discussion They committed fix today: gitbhub commit...

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';...

ReferenceError: Invalid left-hand side in assignment using OR

jquery,angularjs

|| 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....

Improve slow angular directive

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...

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....

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)...

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...

AngularJS - binding/linking two directives together

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...

Passing argument to a factory for a service

javascript,html,angularjs,angular-strap

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 {...

Change placeholder value depending on locale - angularJS

angularjs,localization

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...

Add multiple rows from same model AngularJS

angularjs,node.js

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...

Angular-strap data-trigger='focus' not working

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....

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.

Angular directive not applied on change of the value

javascript,angularjs,restangular

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)...

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

You didn't inject module of 'Restangular' service. Try like this angular.module('AngApp', ['angularGrid','restangular']); ...

$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...

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...

Cannot read property 'then' of undefined - AngularJS

angularjs,restangular

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}) } ...

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...

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...

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? ...

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...

text formatting with AngularJS

javascript,angularjs,events,angularjs-directive,angularjs-watch

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:...

Angularjs $watchCollection on $rootScope not triggered when values updated from directive

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) {...

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':...

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;...

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...

How to disable the form submit when input fields are incorrect in angularjs

javascript,angularjs,forms

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...

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...

recursive function with an array as input

javascript,angularjs,node.js

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...

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...

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...

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...

$http.get returns actual php script instead of running it (yeoman, grunt)

php,angularjs,pdo,gruntjs

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....

AngularJS dynamically call function

javascript,angularjs,angular-filters

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 filter in order by letter

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...

ng-repeat not working in md-chip

angularjs,angular-material

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> ...

Compare two arrays to get count of properties

angularjs,angular-ngmodel,angular-services,angularjs-ng-options

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...

ngOption default selected option

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....

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...

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...

ng-Repeat returning undefined within $scope.$watchCollection

angularjs,ng-repeat,ng-init

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

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.

$rootScope is undefined in $urlRouterProvider.otherwise

angularjs,angular-ui-router

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` -...

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...

How to access HTML variable in Java-script in angularJS

javascript,arrays,angularjs,firebase,angularfire

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...

AngularFire pushing to array doesn't work

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 =...

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...

XSS in angularjs app and web api 2

angularjs,xss,asp.net-web-api2,antixsslibrary

You have multiple possibilities, you can encode the string data you received (https://github.com/mathiasbynens/he) before saving them into the DB, in this manner you don't need to do almost nothing displaying them, because they will displayed as a string like this <script type="..">...</script> for example. But if you still want to...

Security features in angularjs

javascript,angularjs,twitter-bootstrap

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...

Calling AngularJS function from a remote page loaded by Bootstrap modal

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">...

Toggle Class to select offer with angular

javascript,angularjs,performance,caching,angularjs-ng-repeat

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...

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

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...

AngularJS use a directive inside a ng-repeat

angularjs,angular-directive

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"...

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;

Iframe does not show scrollbar

html,css,angularjs,iframe,ionic

You have hidden scrollbars in ionic.app.css: ::-webkit-scrollbar { display: none; } I don't know if it is possible to override this style so probably you have to remove it. Similar question....

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 <...

how to call the application titles and other static messages from a service?

angularjs,css3,twitter-bootstrap-3

how to align column to the right?

You can add ' text-right to your <div class="col-md-6 form-group"> please see here http://plnkr.co/edit/rUAdxLJ6ExKZYFbkveuC?p=preview and if you want to have column for 50% of screen even on small devices change col-md-6 to col-xs-6 http://plnkr.co/edit/RxPx0zzT5YmodepQ3zIj?p=preview...

AngularJS: Adding ng-click within element.append

angularjs,directive

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...

AngularJS - $scope undefined within same controller

angularjs,angularjs-scope

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...

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; ...

remove char from string with angular

angularjs,unit-testing,karma-jasmine

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....

navbar disappears but no dropdown

angularjs,bootstrap

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...

configuration of karma/jasmine to test angularjs throws: No provider for “framework:jasmine”!

It turned out that I have installed karma globally npm install -g karma and karma-jasmine locally npm install karma-jasmine. I reinstalled karma-jasmine globally and now its working.

How to preserve an object initial data?

javascript,json,angularjs,ionic-framework,string-comparison

Yes, that is the expected behavior of javascript. When you assign: $scope.formData = initData; you are NOT making a copy of your initData variable. Instead, your formData is refering to same memory space as your initData. in short, they are referring to the same data.. so even if formData change.....

String comparison in AngularJS

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"); } } ...

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...

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...

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...

Angular material - issues with tooltip and flex

angularjs,angular-material

Remove layout="column" from yr body tag. <body layout="column" ng-app="myApp"> <body ng-app="myApp"> you should place yr main content inside md-content & then give layout="column" or "row" as required. <md-content flex layout="column">  <span>above</span> <span>below</span> </md-content> or <md-content flex layout="row">  <span flex>i'm left</span> <span flex>i'm right</span> </md-content> ...

How do I add a class on ng-click from layout?

javascript,jquery,html,angularjs

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.js - simplest way to handle click inside controller

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 use a service with Http request in Angular JS

javascript,arrays,angularjs

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...

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...

Updating View in Angular js on ajax success callback

ajax,angularjs

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)....

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); }); } } ...

Uncommon “10 $digest iterations reached” case