引用angular {{}} html标记内对象的值

时间:2016-02-27 10:06:07

标签: javascript arrays angularjs angular-material

我在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 }}

1 个答案:

答案 0 :(得分: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}}

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