Question

我必须创建一个2列表单，其中左侧和右侧将具有不同的sections / groups元素。这些部分是作为指令创建的，现在我必须根据我从json收到的列和位置值将这些指令放在表单中。

{ group:"Group 1",column:1,position:2}然后group1指令应放在左栏的左侧和第二行。请建议如何根据收到的位置缝合这些指令

Answer 1

您可以根据需要在DOM上安排指令。

如果您不想更改DOM上的元素，可以创建一个带有“C”或“A”作为必需属性的指令（这意味着您可以将其添加到任何html元素）。然后，您所要做的就是更改每个位置的类/属性以获得所需的结果。

function wordsExist($filter_string, $words)
{
    $filter_words = preg_split("/[\s,\-_]+/", $filter_string);

    foreach ($words as $word) {
        foreach($filter_words as $filter_word) {
            if (
                ($filter_word == $word ) ||
                (levenshtein($filter_word, $word) < 2) ||
                (soundex($filter_word) == soundex($word))
                ) {

                return true;
            }

        }
    }
    return false;
}

然后，您的部分可以是这样的：

.directive('InputA', function () {
    return {
            restrict: 'C',
             template... });

.directive('InputB', function () {
    return {
            restrict: 'C',
             template... });

如果您想要更改订单，则只需将类更改为：

<div col-m-6><div class="InputA"/><div class="InputB"/><div class="InputC"/></div>

请参阅http://jsfiddle.net/zmvr4tee/ - 虽然我不建议使用jquery进行操作，但我会创建一个处理它的父指令但是你明白了。

<强>更新

添加了一个接收JSON的函数，对其进行排序并根据列/位置属性进行放置。

<div col-m-6><div class="InputC"/><div class="InputA"/><div class="InputB"/></div>

请在此处查看更新小提琴：Updated Fiddle

如何使用angular动态地将组件放置在表单中

1 个答案: