引用角度 {{ }} html 标记内的对象的值答案

【问题标题】：Referencing to the value of an object inside angular {{ }} html markup引用角度 {{ }} html 标记内的对象的值
【发布时间】：2016-02-27 10:06:07
【问题描述】：

我在 AngularJS 1 中，我想通过引用以元素值作为键的对象的值来显示我正在显示的元素的值。

目前我的实现效率很低，因为我有两个版本的相同值，一个作为对象数组，另一个作为对象（我用它来创建select 元素）。

例子：

timezonesArrOfObj = {
    { value : "Europe/Dublin", string : "(GMT) Dublin"},
    { value : "Europe/Lisbon", string : "(GMT) Lisbon"},
    { value : "Europe/London", string : "(GMT) London"}
}

timezonesObj = {
    "Europe/Dublin" : "(GMT) Dublin",
    "Europe/Lisbon" : "(GMT) Lisbon",
    "Europe/London" : "(GMT) London"
}

目前，当我想显示该值时，我会这样做：

{{ timezonesObj[element.Timezone] }}

但是，重用timezonesArrOfObj 会更有效，但是我如何将正确的键与element.Timezone 的值相关联以显示正确的timezonesArrOfObj[ (index of key == element.Timezone) ].string？

顺便说一句，我需要timezonesArrOfObj，因为我想确定select 元素中列出的时区的顺序。

// 编辑

合并来自 xSaber 的评论和来自 Vaibhav 的回复，我最终这样做了：

.filter('getObjString', function() {
    return function(args){
        return args.obj[_.findIndex(args.obj, { value : args.val })].string 
    };
});

和html：

{{ { val : element.timezone, obj : timezonesArrOfObj } | getObjString }}

【问题讨论】：

标签： javascript arrays angularjs angular-material

【解决方案1】：

如果您可以改用filter，那就太好了。

如下所示：

app.filter('myFilter', function() {
  var timezonesArrOfObj = [
        { value : "Europe/Dublin", string : "(GMT) Dublin"},
        { value : "Europe/Lisbon", string : "(GMT) Lisbon"},
        { value : "Europe/London", string : "(GMT) London"}
    ];
  return function(input, arg){
    angular.forEach(timezonesArrOfObj, function(key, value){
      if(arg == key.value){
        console.log('yes they are equal');
        return key;
      }
    });
  };
});

在 HTML 中：

您只需在绑定结果的任何地方使用此过滤器：

{{element.timezone | myFilter}}

我希望这会有所帮助。如有任何问题，请告诉我。

【讨论】：