And the answer is cache. I don’t know what it is, but this thing grows. It seems to be related to jQuery. Maybe it’s the jQuery element cache. Do you by any chance apply a jQuery plugin on one or more elements after every service call? Update The problem is that HTML elements are added, … Read more
In React, you just write the necessary JavaScript (and potentially build it into a reusable control as you’ll see). It’s very prescriptive and easy to do once you learn the basic patterns (and how they differ from AngularJS). So, in the render function, you’d need to iterate through the list. In the example below, I’ve … Read more
This solution worked for me (I’m only supporting recent browsers, so I tried to modify the code to be more retro-compatible): HTML: <li ng-repeat=”item in items” ng-click=”showItem(item)”> <h3>{{item.title}}</h3> <button ng-click=”remove(item, $event)”>Remove</button> </li> Scripts: function remove(item, $event) { // do some code here // Prevent bubbling to showItem. // On recent browsers, only $event.stopPropagation() is needed … Read more
DEMO FIDDLE That’s because the directive ng-if creates a new scope for itself, when you refer to $parent, it access the immediate $parent‘s scope, i.e., the inner repeat expression’s scope. So if you want to achieve something you wanted like in the former, you may use this: <div ng-repeat=”i in list”> <div ng-repeat=”j in list2″> … Read more
You need to create custom directives in order to curb the performance issues with angular. Unlike ember angular comes with all the bells and whistles turned on and it’s up to you to tone it down. Here are a few directives I’ve created to help you out. Not all data in your app needs to … Read more
Create individual list-item controllers: demo on Plnkr js angular .module(‘testApp’, []) .controller(‘testCtrl’, function ($scope) { $scope.fooCollection = []; }) .controller(‘fooCtrl’, function ($scope) { $scope.$watch(‘foo.bar’, function (newValue, oldValue) { console.log(‘watch fired, new value: ‘ + newValue); }); }); HTML <html ng-app=”testApp”> <body ng-controller=”testCtrl”> <div ng-repeat=”(fooKey, foo) in fooCollection” ng-controller=”fooCtrl”> Tell me your name: <input ng-model=”foo.bar” ng-change=”doSomething()”> … Read more
Does it solve your problem? function MainCtrl($scope) { $scope.queryList = [ { name: ‘Check Users’, fields: [ “Name”, “Id”] }, { name: ‘Audit Report’, fields: [] }, { name: ‘Bounce Back Report’, fields: [ “Date”] } ]; $scope.models = {}; $scope.$watch(‘selectedQuery’, function (newVal, oldVal) { if ($scope.selectedQuery) { $scope.parameters = $scope.selectedQuery.fields; } }); } And … Read more
Late to the party, but there is a little angular ‘hack’ to achieve this without implementing a dumb directive. Adding a built-in directive that will extend your controller’s scope (like ng-if) everywhere you use the ng-include will actually let you isolate the variable name for all the included scopes. So: <div ng-include=”‘item.html'” ng-if=”true” onload=”item = … Read more
Can anyone explain to me why are the inputs uneditable/readonly? If it’s by design, what’s the rationale behind? It is by design, as of Angular 1.0.3. Artem has a very good explanation of how 1.0.3+ works when you “bind to each ng-repeat item directly” – i.e., <div ng-repeat=”num in myNumbers”> <input type=”text” ng-model=”num”> When your … 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; }