Question

我正在尝试从数组中的对象调用函数。（数组的对象放在地图上。）函数应评估对象的“状态”，并根据状态返回图标的URL。我必须将当前对象传递给函数..但是我该怎么做？

我的对象数组：

mvc.models = [{
  id: "1",
  icon: evaluateColor(currentObject),
  status: 'green'
},
{
  id: "2",
  icon: evaluateColor(currentObject),
  status: 'red'
}];

我的功能：

function evaluateColor(currentObject) {
  if (currentObject.status === 'green') {
    return 'images/green_marker.png'
  }
  else if (currentObject.status === 'yellow') {
    return 'images/yellow_marker.png'
  }
  else {
    return 'images/red_marker.png'
  }
}

我试图通过传递'this'将对象传递给函数，但对象记录为未定义。可能是因为'this'指的是控制器而不是对象。

mvc.models = [{
  id: "1",
  icon: evaluateColor(this),
  status: 'green'
},
{
  id: "2",
  icon: evaluateColor(this),
  status: 'red'
}];

如果有人想看到html :(对象是应该在有角度的谷歌地图上显示的房屋）

<ui-gmap-markers
        models='mvc.models'
        coords="'coords'"
        icon="'icon'"
        >
</ui-gmap-markers>

有人能指出我正确的方向吗？谢谢！

Answer 1

您不需要将整个对象传递给evaluateColor。将其修改为

function evaluateColor(status) {
  if (status === 'green') {
    return 'images/green_marker.png'
  }
  else if (status === 'yellow') {
    return 'images/yellow_marker.png'
  }
  else {
    return 'images/red_marker.png'
  }
}

并使用evaluateColor('green'/'yellow')调用它，因为在初始化对象时，无论如何都可以使用颜色。 this.status不起作用，因为对象声明仍未完成。

或者，您可以调用不带图标属性的初始化模型并调用此函数：

for(var i in models){
   models[i].icon = evaluateColor(models[i].status);
}

希望这能解决您的疑问.. :)

Answer 2

这很容易。对代码进行略微修改以允许正确的范围将解决它。检查一下;

mvc = {
  models:
    [
      {
       id: "1",
     icon: evaluateColor,
   status: 'green'
      },
      {
       id: "2",
     icon: evaluateColor,
   status: 'red'
      }
    ]
  };

function evaluateColor() {
  if (this.status === 'green') {
    return 'images/green_marker.png';
  }
  else if (this.status === 'yellow') {
    return 'images/yellow_marker.png';
  }
  else {
    return 'images/red_marker.png';
  }
}
console.log(mvc.models[0].icon());

但是我不喜欢嵌套的ifs和thens。更合适的方法就像

mvc = {
  models:
    [
      {
       id: "1",
     icon: evaluateColor,
   status: 'green'
      },
      {
       id: "2",
     icon: evaluateColor,
   status: 'red'
      },
      {
       id: "3",
     icon: evaluateColor,
   status: 'yellow'
      }
    ]
  };

function evaluateColor() {
var lut = { green : 'images/green_marker.png',
           yellow : 'images/yellow_marker.png'};
return lut[this.status] || 'images/red_marker.png';
}

console.log(mvc.models[0].icon());
console.log(mvc.models[1].icon());
console.log(mvc.models[2].icon());

如果你不希望icon每次需要获取图标时都运行一个函数，那么你可以简单地定义一个init属性来正确初始化对象......好吧，让我们这样做。

mvc = {
  models:
    [
      {
       id: "1",
     icon: "",
   status: 'green',
     init: getIcon
      },
      {
       id: "2",
     icon: "",
   status: 'red',
     init: getIcon
      },
      {
       id: "3",
     icon: "",
   status: 'yellow',
     init: getIcon
      }
    ]
  };

function evaluateColor() {
var lut = { green : 'images/green_marker.png',
           yellow : 'images/yellow_marker.png'};
return lut[this.status] || 'images/red_marker.png';
}

function getIcon(){
  this.icon = evaluateColor.call(this);
}
mvc.models.forEach(e => e.init())
console.log(JSON.stringify(mvc,null,2));

Answer 3

尝试另一种模式

mvc.models.push({ id : '1' , status : 'green'});
mvc.models.push({ id : '2' , status : 'red'});

$.each(mvc.models , function(idx, item){ item.color = eluateColor(item.status)});

Answer 4

您可以创建icons as getter字段，例如

mvc.models = [{
  id: "1",
  get icon(){ return evaluateColor(this);},
  status: 'green'
},
{
  id: "2",
  get icon(){ return evaluateColor(this);},
  status: 'red'
}];

获取数组中当前对象的索引？将当前对象传递给函数。 Angular JS

4 个答案: