AngularJS : How to watch service variables?

You can always use the good old observer pattern if you want to avoid the tyranny and overhead of $watch. In the service: factory(‘aService’, function() { var observerCallbacks = []; //register an observer this.registerObserverCallback = function(callback){ observerCallbacks.push(callback); }; //call this when you know ‘foo’ has been changed var notifyObservers = function(){ angular.forEach(observerCallbacks, function(callback){ callback(); }); … Read more

How to use a keypress event in AngularJS?

You need to add a directive, like this: Javascript: app.directive(‘myEnter’, function () { return function (scope, element, attrs) { element.bind(“keydown keypress”, function (event) { if(event.which === 13) { scope.$apply(function (){ scope.$eval(attrs.myEnter); }); event.preventDefault(); } }); }; }); HTML: <div ng-app=”” ng-controller=”MainCtrl”> <input type=”text” my-enter=”doSomething()”> </div>

What is the difference between ng-if and ng-show/ng-hide

ngIf The ngIf directive removes or recreates a portion of the DOM tree based on an expression. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. <!– when $scope.myValue is truthy (element is restored) … Read more

Way to ng-repeat defined number of times instead of repeating over array?

Update (9/25/2018) Newer versions of AngularJS (>= 1.3.0) allow you to do this with only a variable (no function needed): <li ng-repeat=”x in [].constructor(number) track by $index”> <span>{{ $index+1 }}</span> </li> $scope.number = 5; This was not possible at the time the question was first asked. Credit to @Nikhil Nambiar from his answer below for … Read more

AngularJS ng-click stopPropagation

ngClick directive (as well as all other event directives) creates $event variable which is available on same scope. This variable is a reference to JS event object and can be used to call stopPropagation(): <table> <tr ng-repeat=”user in users” ng-click=”showUser(user)”> <td>{{user.firstname}}</td> <td>{{user.lastname}}</td> <td> <button class=”btn” ng-click=”deleteUser(user.id, $index); $event.stopPropagation();”> Delete </button> </td> </tr> </table> PLUNKER

Working with select using AngularJS’s ng-options

One thing to note is that ngModel is required for ngOptions to work… note the ng-model=”blah” which is saying “set $scope.blah to the selected value”. Try this: <select ng-model=”blah” ng-options=”item.ID as item.Title for item in items”></select> Here’s more from AngularJS’s documentation (if you haven’t seen it): for array data sources: label for value in array … Read more

How to display length of filtered ng-repeat data

For Angular 1.3+ (credits to @Tom) Use an alias expression (Docs: Angular 1.3.0: ngRepeat, scroll down to the Arguments section): <div ng-repeat=”person in data | filter:query as filtered”> </div> For Angular prior to 1.3 Assign the results to a new variable (e.g. filtered) and access it: <div ng-repeat=”person in filtered = (data | filter: query)”> … Read more

Angular directives – when and how to use compile, controller, pre-link and post-link [closed]

In which order the directive functions are executed? For a single directive Based on the following plunk, consider the following HTML markup: <body> <div log=’some-div’></div> </body> With the following directive declaration: myApp.directive(‘log’, function() { return { controller: function( $scope, $element, $attrs, $transclude ) { console.log( $attrs.log + ‘ (controller)’ ); }, compile: function compile( tElement, … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)