user1271930 user1271930 - 2 months ago 11
Sass (Sass) Question

Accessing property value of a input in Angular app with jQuery

I've now managed to get a input fields value (property value) with following code:

jQuery('input[ng-model="palette.name"]').each(function(index,item){
//console.log(angular.element(this.id).value);
console.log($(this).prop('value'));
});


However, it doesn't work as planned with following code. What I'm trying to achieve is to implement following script on http://mcg.mbitson.com/#/ to generate a LESS formatted color palette:

(function() {
var colors = {}, main = {};
jQuery(".palette-colors").each(function() {


// This is the probem: color becomes undefined althougt it works fine in the code above
var color = jQuery(this > 'input[ng-model="palette.name"]').prop('value');

//color = jQuery(color).prop('value');
console.log(color);
color.trim().toLowerCase().replace(" ", "-");

colors[color] = {};

jQuery(this).find("md-list-item > div").each(function(index,item) {
if (index !== 5) {
var shade = jQuery(this).find('span[ng-bind="color.name"]').text().trim(),
hex = jQuery(this).find('span[ng-bind="color.hex"]').text().trim();

colors[color][shade] = hex;
}
});

main[color] = color + "-" + 500; //jQuery(this).find(".main-color .shade").text().trim();
});

var LESS = "";

jQuery.each(colors, function(name, shades) {
LESS += "\n\n";
jQuery.each(shades, function(shade, hex) {
LESS += "@" + name + "-" + shade + ": " + hex + ";\n";
});
if (main[name]) {
LESS += "@" + name + ": " + main[name] + ";\n";
}
});
console.log(LESS);
})();


The original code for google color paletter "scraper" is as follows:

(function() {
var colors = {}, main = {};
jQuery(".color-group").each(function() {
var color = jQuery(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
colors[color] = {};

jQuery(this).find(".color").not(".main-color").each(function() {
var shade = jQuery(this).find(".shade").text().trim(),
hex = jQuery(this).find(".hex").text().trim();

colors[color][shade] = hex;
});
main[color] = color + "-" + jQuery(this).find(".main-color .shade").text().trim();

});
var LESS = "";
jQuery.each(colors, function(name, shades) {
LESS += "\n\n";
jQuery.each(shades, function(shade, hex) {
LESS += "@" + name + "-" + shade + ": " + hex + ";\n";
});
if (main[name]) {
LESS += "@" + name + ": " + main[name] + ";\n";
}
});
console.log(LESS);
})();

Answer

This is the working code:

(function() {
      var colors = {}, main = {};
      jQuery(".palette").each(function() {

        var color = jQuery(this).find('input[ng-model="palette.name"]').val().trim().toLowerCase().replace(" ", "-");

        colors[color] = {};

        jQuery(this).find("md-list-item > div").each(function(index,item) {
          if (index !== 5) {
            var shade = jQuery(this).find('span[ng-bind="color.name"]').text().trim(),
                hex   = jQuery(this).find('span[ng-bind="color.hex"]').text().trim();

            colors[color][shade] = hex;
          }
        });

        main[color] = color + "-" + 500;
      });

      var LESS = "";

      jQuery.each(colors, function(name, shades) {
        LESS += "\n\n";
        jQuery.each(shades, function(shade, hex) {
          LESS += "@" + name + "-" + shade + ": " + hex + ";\n";
        });
        if (main[name]) {
          LESS += "@" + name + ": " + main[name] + ";\n";
        }
      });
      console.log(LESS);
      console.log(colors,main);
    })();

Which produces following results:

@deep-red-50: #ffffff;
@deep-red-100: #f4cbcb;
@deep-red-200: #ea9c9c;
@deep-red-300: #de6161;
@deep-red-400: #d84848;
@deep-red-600: #bc2828;
@deep-red-700: #a22222;
@deep-red-800: #891d1d;
@deep-red-900: #701818;
@deep-red-A100: #ffffff;
@deep-red-A200: #f4cbcb;
@deep-red-A400: #d84848;
@deep-red-A700: #a22222;
@deep-red: deep-red-500;


@red-50: #ffffff;
@red-100: #feeae9;
@red-200: #fbb9b4;
@red-300: #f77970;
@red-400: #f65e53;
@red-600: #f22819;
@red-700: #e11b0c;
@red-800: #c3170b;
@red-900: #a61409;
@red-A100: #ffffff;
@red-A200: #feeae9;
@red-A400: #f65e53;
@red-A700: #e11b0c;
@red: red-500;


@pink-50: #ffffff;
@pink-100: #ffffff;
@pink-200: #ffffff;
@pink-300: #ffffff;
@pink-400: #ffecee;
@pink-600: #ffaeb6;
@pink-700: #ff909b;
@pink-800: #ff717f;
@pink-900: #ff5364;
@pink-A100: #ffffff;
@pink-A200: #ffffff;
@pink-A400: #ffecee;
@pink-A700: #ff909b;
@pink: pink-500;


@white-50: #ffffff;
@white-100: #ffffff;
@white-200: #ffffff;
@white-300: #ffffff;
@white-400: #ffffff;
@white-600: #f0f0f0;
@white-700: #e0e0e0;
@white-800: #d1d1d1;
@white-900: #c2c2c2;
@white-A100: #ffffff;
@white-A200: #ffffff;
@white-A400: #ffffff;
@white-A700: #e0e0e0;
@white: white-500;


@yellow-50: #ffffff;
@yellow-100: #fff0c4;
@yellow-200: #ffe28c;
@yellow-300: #ffd044;
@yellow-400: #ffc926;
@yellow-600: #e7ae00;
@yellow-700: #c99700;
@yellow-800: #aa8000;
@yellow-900: #8c6900;
@yellow-A100: #ffffff;
@yellow-A200: #fff0c4;
@yellow-A400: #ffc926;
@yellow-A700: #c99700;
@yellow: yellow-500;


@black-50: #a6a6a6;
@black-100: #7f7f7f;
@black-200: #636363;
@black-300: #404040;
@black-400: #303030;
@black-600: #121212;
@black-700: #020202;
@black-800: #000000;
@black-900: #000000;
@black-A100: #a6a6a6;
@black-A200: #7f7f7f;
@black-A400: #303030;
@black-A700: #020202;
@black: black-500;


@deep-gray-50: #fafafa;
@deep-gray-100: #d3d3d3;
@deep-gray-200: #b7b7b7;
@deep-gray-300: #949494;
@deep-gray-400: #848484;
@deep-gray-600: #666666;
@deep-gray-700: #565656;
@deep-gray-800: #474747;
@deep-gray-900: #383838;
@deep-gray-A100: #fafafa;
@deep-gray-A200: #d3d3d3;
@deep-gray-A400: #848484;
@deep-gray-A700: #565656;
@deep-gray: deep-gray-500;


@light-gray-50: #ffffff;
@light-gray-100: #ffffff;
@light-gray-200: #ffffff;
@light-gray-300: #dcdcdc;
@light-gray-400: #cccccc;
@light-gray-600: #aeaeae;
@light-gray-700: #9e9e9e;
@light-gray-800: #8f8f8f;
@light-gray-900: #808080;
@light-gray-A100: #ffffff;
@light-gray-A200: #ffffff;
@light-gray-A400: #cccccc;
@light-gray-A700: #9e9e9e;
@light-gray: light-gray-500;
Comments