angularjs – Page 203

Angular pass callback function to child component as @Input similar to AngularJS way

September 29, 2022 by Tarik

I think that is a bad solution. If you want to pass a Function into component with @Input(), @Output() decorator is what you are looking for. export class SuggestionMenuComponent { @Output() onSuggest: EventEmitter<any> = new EventEmitter(); suggestionWasClicked(clickedEntry: SomeModel): void { this.onSuggest.emit([clickedEntry, this.query]); } } <suggestion-menu (onSuggest)=”insertSuggestion($event[0],$event[1])”> </suggestion-menu>

File Upload using AngularJS

September 29, 2022 by Tarik

Some of the answers here propose using FormData(), but unfortunately that is a browser object not available in Internet Explorer 9 and below. If you need to support those older browsers, you will need a backup strategy such as using <iframe> or Flash. There are already many Angular.js modules to perform file uploading. These two … Read more

How do I call an Angular.js filter with multiple arguments?

September 29, 2022 by Tarik

In templates, you can separate filter arguments by colons. {{ yourExpression | yourFilter: arg1:arg2:… }} From Javascript, you call it as $filter(‘yourFilter’)(yourExpression, arg1, arg2, …) There is actually an example hidden in the orderBy filter docs. Example: Let’s say you make a filter that can replace things with regular expressions: myApp.filter(“regexReplace”, function() { // register … Read more

How to reload or re-render the entire page using AngularJS

September 29, 2022 by Tarik

For the record, to force angular to re-render the current page, you can use: $route.reload(); According to AngularJS documentation: Causes $route service to reload the current route even if $location hasn’t changed. As a result of that, ngView creates new scope, reinstantiates the controller.

How to set bootstrap navbar active class with Angular JS?

September 29, 2022 by Tarik

A very elegant way is to use ng-controller to run a single controller outside of the ng-view: <div class=”collapse navbar-collapse” ng-controller=”HeaderController”> <ul class=”nav navbar-nav”> <li ng-class=”{ active: isActive(“https://stackoverflow.com/”)}”><a href=”https://stackoverflow.com/”>Home</a></li> <li ng-class=”{ active: isActive(‘/dogs’)}”><a href=”http://stackoverflow.com/dogs”>Dogs</a></li> <li ng-class=”{ active: isActive(‘/cats’)}”><a href=”http://stackoverflow.com/cats”>Cats</a></li> </ul> </div> <div ng-view></div> and include in controllers.js: function HeaderController($scope, $location) { $scope.isActive = function (viewLocation) … Read more

How to create separate AngularJS controller files?

September 28, 2022 by Tarik

File one: angular.module(‘myApp.controllers’, []); File two: angular.module(‘myApp.controllers’).controller(‘Ctrl1’, [‘$scope’, ‘$http’, function($scope, $http){ }]); File three: angular.module(‘myApp.controllers’).controller(‘Ctrl2’, [‘$scope’, ‘$http’, function($scope, $http){ }]); Include in that order. I recommend 3 files so the module declaration is on its own. As for folder structure there are many many many opinions on the subject, but these two are pretty good … Read more

How do I conditionally apply CSS styles in AngularJS?

September 28, 2022 by Tarik

Angular provides a number of built-in directives for manipulating CSS styling conditionally/dynamically: ng-class – use when the set of CSS styles is static/known ahead of time ng-style – use when you can’t define a CSS class because the style values may change dynamically. Think programmable control of the style values. ng-show and ng-hide – use … Read more

How to have a default option in Angular.js select box

September 28, 2022 by Tarik

You can simply use ng-init like this <select ng-init=”somethingHere = options[0]” ng-model=”somethingHere” ng-options=”option.name for option in options”> </select>

What’s the most concise way to read query parameters in AngularJS?

September 28, 2022 by Tarik

You can inject $routeParams (requires ngRoute) into your controller. Here’s an example from the docs: // Given: // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby // Route: /Chapter/:chapterId/Section/:sectionId // // Then $routeParams ==> {chapterId:1, sectionId:2, search:’moby’} EDIT: You can also get and set query parameters with the $location service (available in ng), particularly its search method: $location.search(). $routeParams are less … Read more

getting the ng-object selected with ng-change

September 28, 2022 by Tarik

Instead of setting the ng-model to item.size.code, how about setting it to size: <select ng-options=”size as size.name for size in sizes” ng-model=”item” ng-change=”update()”></select> Then in your update() method, $scope.item will be set to the currently selected item. And whatever code needed item.size.code, can get that property via $scope.item.code. Fiddle. Update based on more info in … Read more