在 angularjs 中创建动态 html 元素

Question

我正在尝试根据存储在 SQL 数据库中的值在 angular 中创建一些动态 html 元素。这是一个工作奖品选择应用程序，我有 5 个奖品，这些奖品有相关的描述，每个描述都有一个类型（span、p、div、h1 等）。因此，根据我们的数据库所说，该行应该是我希望 html 自行创建。数据的布局方式是我有一个数据对象，它有一个图片数组，每个图片对象都有一个描述对象数组 { Pictures[ Descriptions[] ] }

"Pictures":[{"ID":9,"IDName":"messengerBag","Descriptions":[{"ID":7,"Text":"Messenger bag is a perfect size for most 15” laptops. The 10th anniversary logo is beautifully displayed in full detail on the front pocket.","DescriptionType":"h3"},{"ID":8,"Text":"Zippered main compartment includes a padded laptop sleeve.","DescriptionType":"p"},{"ID":9,"Text":"Velcro front pocket with organization panel.","DescriptionType":"p"}, {"ID":10,"Text":"Pen loop and side mesh pocket.","DescriptionType":"p"},{"ID":11,"Text":"Adjustable shoulder strap and two carry handles.","DescriptionType":"ul"},...

我试过直接使用这些值，但没有用：

<div ng-repeat="pic2 in vm.data.Pictures" ng-show="{{$index}} == vm.index">
    <{{desc.DescriptionType}} ng-repeat="desc in pic2.Descriptions">{{desc.Text}}</{{desc.DescriptionType}}>
</div>

然后我决定尝试一个指令。我可以将其添加到 return 文本，但从来没有包含我希望的描述类型的元素。

.directive("dynamicelement", ['$compile', function ($compile) {
    return {
        restrict: "E",
        scope: { desc: '@' },
        template: '<' + '{{header}}' + '>' + '{{header2}}' + '</' + '{{header}}' + '>',
        controller: function ($scope) {
            $scope.header = "p";
            $scope.header2 = "hi";
        }
    }
};

我读过一篇文章，他们谈到在我的指令中使用 $compile 和需要一个 link 函数，但我不太确定如何使用它们。

我还有一个使用来自 How can I use Angular to output dynamic form fields? 的 ngSwitch 的示例，但这似乎不适合我目前正在使用的双 ng-repeat 组织。

我正在努力实现的目标是否可行？如果可行，有人对我应该关注的内容提出建议吗？感谢您的宝贵时间。

Answer 1

嵌套的 ng-repeat 上没有任何类型的 HTML 元素或指令，因此没有可重复的内容。

像这样的东西应该可以工作：

<div ng-repeat="pic2 in vm.data.Pictures" ng-show="{{$index}} == vm.index">
    <div ng-repeat="desc in pic2.Descriptions">
        {{desc.DescriptionType}} 
        {{desc.Text}}
     </div>
 </div>

Answer 2

我能够使用 ng-if 来解决这个问题。它不像我希望的那样干净，但它正在起作用。

    <div data-ng-repeat="pic2 in vm.data.Pictures" class="picture{{$index}} pictures">
        <div data-ng-repeat="desc in pic2.Descriptions">
            <p data-ng-if="desc.DescriptionType=='p'">{{desc.Text}}</p>
            <span data-ng-if="desc.DescriptionType=='span'">{{desc.Text}}</span>
            <div data-ng-if="desc.DescriptionType=='div'">{{desc.Text}}</div>
            <label data-ng-if="desc.DescriptionType=='label'">{{desc.Text}}</label>
            <h1 data-ng-if="desc.DescriptionType=='h1'">{{desc.Text}}</h1>
            <h2 data-ng-if="desc.DescriptionType=='h2'">{{desc.Text}}</h2>
            <h3 data-ng-if="desc.DescriptionType=='h3'">{{desc.Text}}</h3>
            <h4 data-ng-if="desc.DescriptionType=='h4'">{{desc.Text}}</h4>
            <h5 data-ng-if="desc.DescriptionType=='h5'">{{desc.Text}}</h5>
            <ul data-ng-if="desc.DescriptionType=='ul'"><li>{{desc.Text}}</li></ul>
            <ol data-ng-if="desc.DescriptionType=='ol'"><li>{{desc.Text}}</li></ol>
        </div>
    </div>

在 angularjs 中创建动态 html 元素

Creating dynamic html elements in angularjs

angularjs

angular-directive