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>

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

vue.js的

Code example将对象重命名为树

以下是该项目的回购：https://github.com/jdwillemse/translation-utility

Answer 1

如果您使用ng-repeat="(key, value) in master"

，则可以

然后你就可以做到：

{{translation[key]}}

This question回答了如何进行键值循环的基础知识。

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。

Angular / Vue.js遍历同一指令中的两个对象

1 个答案: