Search code examples
javascriptangularjsconcatenationjqlite

How does one concat the results of angularjs jqlite find?


I am working on a directive that is going to disable all form elements on the page based on a rootScope variable (similar to adding ng-disabled to every item manually, but just a more convenient way. I'm reworking an existing app and don't want to dig through a bunch of templates)

I need to be able to concat the results of multiple jqlite .find() statements. It doesn't seem like jqlite supports calls like .find('select,input'). I always get an empty array. Also, since it returns objects, I cannot just concat them. I'll probably get a facepalm from this, but I turn to you, StackOverflow.

var myApp = angular.module('myApp',[]);

myApp.directive('disableContents', function() {
    return {
        compile: function(tElem, tAttrs) {
            var inputs = tElem.find('input');
            var selects = tElem.find('select');

            var formItems = SOMETHINGTOJOINTHESTUFFABOVE
            angular.forEach(formItems, function(el){
...

heres what i've come up with so far, but it bugs me to have multiple foreach statements.

'use strict';
angular.module('induction').directive('sttiDisabled', function() {
    return {
        compile: function(tElem, tAttrs) {
            var inputs = tElem.find('input');
            var selects = tElem.find('select');

            var applyDisable = function(el) {
                el = angular.element(el);
                var prevVal = el.attr('ng-disabled');
                prevVal = prevVal? prevVal +  ' || ': '';
                prevVal += tAttrs['sttiDisabled'];
                el.attr('ng-disabled', prevVal);
            }

            angular.forEach(inputs, function(el){
                applyDisable(el);
            });

            angular.forEach(selects, function(el){
                applyDisable(el);
            });


        }
    }
});

Solution

  • jqLite (angular.element) indeed doesn't support complex selectors so you will have to first select all you need with querySelectorAll and then wrap this collection with angular.element instance:

    var formControls = angular.element(tElem[0].querySelectorAll('input, select'));