AngularJS : ng-repeat filter when value is greater than

Create a predicate function on the relevant scope: $scope.greaterThan = function(prop, val){ return function(item){ return item[prop] > val; } } As a first argument, it takes a property name on the object. The second argument is an integer value. Use it in your view like this: <tr ng-repeat-start=”list in Data.Items | filter: greaterThan(‘NumberOfStamps’, 0)”> Demo

Custom child directive accessing scope of parent

The city directive $parent is a transcluded scope of state directive. The transcluded scope of the state directive is inherit for $parent of state directive which is controller thus that is why $parent.MyName = India. The $parent of transcluded scope is the state directive isolated scope ( scope = {} ) that is why $parent.$parent.MyName …

Read more

Check existence of attribute in AngularJs Directive

The way to do this is to check for the existence of the attributes within the link function’s attrs parameter, and assign this to variables within your directive’s isolate scope. scope:{}, link: function(scope, element, attrs){ scope.status=”status” in attrs; }, This should work without having to use an if statement within your link function.

AngularJS conditional ng-disabled does not re-enable

That’s because HTML attributes are always strings, so in your example ngDisabled is evaluating a string in both cases (“true” or “false”). To remedy, you should compare the model against the string value in ngDisabled: ng-disabled=”new_account == ‘false'” … or use a checkbox, to get the actual boolean value: <input type=”checkbox” ng-model=”existing_account” name=”register” id=”checkbox_new_account” /> …

Read more

AngularJS : transcluding multiple sub elements in a single Angular directive

Starting Angular 1.5, it’s now possible to create multiple slots. Instead of transclude:true, you provide an object with the mappings of each slot: https://docs.angularjs.org/api/ng/directive/ngTransclude angular.module(‘multiSlotTranscludeExample’, []) .directive(‘pane’, function(){ return { restrict: ‘E’, transclude: { ‘title’: ‘?pane-title’, ‘body’: ‘pane-body’, ‘footer’: ‘?pane-footer’ }, template: ‘<div style=”border: 1px solid black;”>’ + ‘<div class=”title” ng-transclude=”title”>Fallback Title</div>’ + ‘<div ng-transclude=”body”></div>’ …

Read more

How to $watch changes on models created by ng-repeat?

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

Binding inputs to an array of primitives using ngRepeat => uneditable inputs

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

Accessing inherited scope with Controller As approach

After researching, I came to the following realization: Controller-As approach is NOT a substitute for using $scope. Both have their place, and can/should be used together judiciously. $scope does exactly what the name implies: i.e. it defines ViewModel properties on the $scope. This works best for sharing scope with nested controllers that can use the …

Read more