Here’s a brief stand-alone answer, with links to official docs for further info (definition of “services” added for good measure): http://docs.angularjs.org/guide/controller In AngularJS, a controller is a JavaScript constructor function that is used to augment the AngularJS scope. When a controller is attached to the DOM via the ng-controller directive, AngularJS will instantiate a new … Read more
You can simply assign a function as an expression and return proper class from there. Edit: there is also better solution for dynamic classes. Please see note below. Snippet from view: <div ng-class=”appliedClass(myObj)”>…</div> and in the controller: $scope.appliedClass = function(myObj) { if (myObj.someValue === “highPriority”) { return “special-css-class”; } else { return “default-class”; // Or … Read more
First thing is first. You need to define $scope.telephone as an array in your controller before you can start using it in your view. $scope.telephone = []; To address the issue of ng-model not being recognised when you append a new input – for that to work you have to use the $compile Angular service. … Read more
In did that for AngularJS v1.2+ HTML: <span ng-bind-html=”highlight(textToSearchThrough, searchText)”></span> JS: $scope.highlight = function(text, search) { if (!search) { return $sce.trustAsHtml(text); } return $sce.trustAsHtml(text.replace(new RegExp(search, ‘gi’), ‘<span class=”highlightedText”>$&</span>’)); }; CSS: .highlightedText { background: yellow; }
I struggled with this problem for a while. What worked was to bind the input to an object instead of a primitive. <!– Partial –> <input type=”checkbox” ng-model=”someObject.someProperty”> Check Me! // Controller $scope.someObject.someProperty = false
We could do it with jQuery: $(window).resize(function(){ alert(window.innerWidth); $scope.$apply(function(){ //do something to update current scope based on the new innerWidth and let angular update the view. }); }); Be aware that when you bind an event handler inside scopes that could be recreated (like ng-repeat scopes, directive scopes,..), you should unbind your event handler when … Read more
Best way to do this is to use a function: <div ng-repeat=”product in products | filter: myFilter”> $scope.myFilter = function (item) { return item === ‘red’ || item === ‘blue’; }; Alternatively, you can use ngHide or ngShow to dynamically show and hide elements based on a certain criteria.
In your CSS add: [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } and just add a “ng-cloak” attribute to your div like here: <div id=”template1″ ng-cloak>{{scoped_var}}<div> doc: https://docs.angularjs.org/api/ng/directive/ngCloak
To have a repeater with a large array that you don’t watch to watch every item. You’ll need to create a custom directive that takes one argument, and expression to your array, then in the linking function you’d just watch that array, and you’d have the linking function programmatically refresh the HTML (rather than using … Read more
$location won’t help you with external URLs, use the $window service instead: $window.location.href=”http://www.google.com”; Note that you could use the window object, but it is bad practice since $window is easily mockable whereas window is not.