使用 jQuery 在 Angular 应用程序中访问输入的属性值

Question

我现在已经设法使用以下代码获取输入字段值（属性值）：

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

但是，以下代码无法按计划工作。我想要实现的是在http://mcg.mbitson.com/#/ 上实现以下脚本以生成 LESS 格式的调色板：

        (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);
    })();

google调色板“刮刀”原代码如下：

    (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 1

这是工作代码：

(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);
    })();

这会产生以下结果：

@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;