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中。