Angular/Vue.js通过同一指令中的两个对象循环

Question

我不知道我想要做什么是可能的。我试图创建一个Angular指令，它重复一个数据对象并打印出它的值以及具有相似结构的第二个不相关对象的值。

我正在翻译应用程序，其中语言文件的主版本显示在一列中，翻译显示在下一个中。我想通过主对象重复一遍，然后在有一个对象的地方显示翻译。我不想合并这两个对象，因为我希望保持翻译对象和DOM之间的双向绑定，因此可以轻松保存。

这是很简单的什么，我试图做的：

对象

var master: { 
    face: { 
     a: aaa, 
     b: bbb, 
     c: ccc, 
     more: { 
      d: ddd, 
      e: eee 
     } 
    }, 
    magic: magic, 
    test: test 
} 

var translation: { 
    face: { 
     c: cccc, 
     more: { 
      d: dddd 
     } 
    }, 
    test: testttt 
} 

DOM输出

<ul> 
    <li> 
     face 
     <ul> 
      <li> 
       <div>aaa</div> 
       <div></div> 
      </li> 
      <li> 
       <div>bbb</div> 
       <div></div> 
      </li> 
      <li> 
       <div>ccc</div> 
       <div>cccc</div> 
      </li> 
      <li> 
       more 
       <ul> 
        <li> 
         <div>ddd</div> 
         <div>dddd</div> 
        </li> 
        <li> 
         <div>eee</div> 
         <div></div> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <div>magic</div> 
     <div></div> 
    </li> 
    <li> 
     <div>test</div> 
     <div>testttt</div> 
    </li> 
</ul> 

我问这作为一个角度问题，但我打算使用vue.js。我这样做是因为Angular社区更大，因为我相信从Angular学到的概念很容易转换到vue.js上。我不想使用Angular，因为完整的框架比我需要的要多。

vue.js redering一个对象作为树

这里Code example是项目的回购协议：https://github.com/jdwillemse/translation-utility

Answer 1

可以，如果你使用ng-repeat="(key, value) in master"

然后，你可以简单地做：

{{translation[key]}}

This question解答如何将d o关键价值循环的基础知识。

This is also building a tree in Ang

我没有用过Vue.js，但你应该能够通过使用密钥，价值循环，和筑巢的键值来做到这一点环路内。

这是Vue公司相当于：

<ul id="repeat-object"> <li v-repeat="primitiveValues">{{$key}} : {{$value}}</li> <li v-repeat="objectValues">{{$key}} : {{msg}}</li> </ul>

我在Vue公司是什么不知道，是如果你能在DOM访问[]符号。你想{{translation[$key]}}，不知道你是否可以像Vue那样访问数据。你可以在Angular中。