angularjs

how to use ng-option to set default value of select element

So assuming that object is in your scope: <div ng-controller=”MyCtrl”> <select ng-model=”prop.value” ng-options=”v for v in prop.values”> </select> </div>   function MyCtrl($scope) { $scope.prop = { “type”: “select”, “name”: “Service”, “value”: “Service 3”, “values”: [ “Service 1”, “Service 2”, “Service 3”, “Service 4”] }; } Working Plunkr: http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g

AngularJS: ng-model not binding to ng-checked for checkboxes

ngModel and ngChecked are not meant to be used together. ngChecked is expecting an expression, so by saying ng-checked=”true”, you’re basically saying that the checkbox will always be checked by default. You should be able to just use ngModel, tied to a boolean property on your model. If you want something else, then you either … Read more

AngularJS 1.5+ Components do not support Watchers, what is the work around?

Writing Components without Watchers This answer outlines five techniques to use to write AngularJS 1.5 components without using watchers. Use the ng-change Directive Use the $onChanges Life-cycle Hook Use the $doCheck Life-cycle Hook Intercomponent Communication with require Push Values from a Service with RxJS Use the ng-change Directive what alt methods available to observe obj … Read more

AngularJS ui router passing data between states without URL

We can use params, new feature of the UI-Router: API Reference / ui.router.state / $stateProvider params A map which optionally configures parameters declared in the url, or defines additional non-url parameters. For each parameter being configured, add a configuration object keyed to the name of the parameter. See the part: “…or defines additional non-url parameters…” … Read more

Global variables in AngularJS

You’ve got basically 2 options for “global” variables: use a $rootScope http://docs.angularjs.org/api/ng.$rootScope use a service http://docs.angularjs.org/guide/services $rootScope is a parent of all scopes so values exposed there will be visible in all templates and controllers. Using the $rootScope is very easy as you can simply inject it into any controller and change values in this … Read more

angular ng-bind-html and directive within it

I was also facing this problem and after hours searching the internet I read @Chandermani’s comment, which proved to be the solution. You need to call a ‘compile’ directive with this pattern: HTML: <div compile=”details”></div> JS: .directive(‘compile’, [‘$compile’, function ($compile) { return function(scope, element, attrs) { scope.$watch( function(scope) { // watch the ‘compile’ expression for … Read more

How to Display blob (.pdf) in an AngularJS app

First of all you need to set the responseType to arraybuffer. This is required if you want to create a blob of your data. See Sending_and_Receiving_Binary_Data. So your code will look like this: $http.post(‘/postUrlHere’,{myParams}, {responseType:’arraybuffer’}) .success(function (response) { var file = new Blob([response], {type: ‘application/pdf’}); var fileURL = URL.createObjectURL(file); }); The next part is, you … Read more

Adding multiple class using ng-class

To apply different classes when different expressions evaluate to true: <div ng-class=”{class1 : expression1, class2 : expression2}”> Hello World! </div> To apply multiple classes when an expression holds true: <!– notice expression1 used twice –> <div ng-class=”{class1 : expression1, class2 : expression1}”> Hello World! </div> or quite simply: <div ng-class=”{‘class1 class2’ : expression1}”> Hello World! … Read more