Deep property filtering inside ng-repeat

Something that I’ll likely need to remember how to do in future is filtering a list by an element’s property. This can be taken further by filtering by that property’s property and so on.

 <div ng-repeat=”prescription in orderData.prescriptions | filter: {patient: { id: selectedPatient.patient.id}}”>

Just a matter of creating an inline JSON object that reflects the path to the relevant property. Much simpler than expected.

Directive for injecting a string at the cursor position

I was assigned to work on a task where if a user clicks on a specified html element and clicks an add button, then a dropdown’s selected value will appear where the cursor’s last position was.

This was achieved using the Range API https://developer.mozilla.org/en-US/docs/Web/API/Range

I created a directive which is applied on a html element of my choice, a function in the controller that broadcasts the event that the directive is listening to which injects the passed in string value.
I also pass in a CSS ID so as to make sure that we are only injecting inside the clicked on HTML element.

First, here’s the directive:
app.directive('injectPlaceholders', ['$rootScope', function ($rootScope) {
return {
link: function (scope, element, attrs) {
scope.$on('injectSelectedPlaceholder', function (e, placeHolderInfo) {
if (window.getSelection) {
var selection = window.getSelection();

if (selection.getRangeAt && selection.rangeCount) {
var selectionRange = selection.getRangeAt(0);

var userClickedInsideSpecifiedElement = $(selectionRange.commonAncestorContainer).parents(placeHolderInfo.text_area_id).length === 1;

if (userClickedInsideSpecifiedElement ) {
selectionRange.insertNode(document.createTextNode(placeHolderInfo.place_holder));
}
}
}
});
}
}
}]);

Here is the controller function that is bound to the button’s ng-click event that does the broadcasting.
$scope.injectSelectedPlaceholder = function () {
var placeHolderInfo = {
place_holder: $scope.selectedPlaceHolder,
text_area_id: "#UIMessageTextArea"
};

$rootScope.$broadcast('injectSelectedPlaceholder', placeHolderInfo);
};