Question

我正在尝试根据我存储在SQL数据库中的值以角度创建一些动态html元素。这是一个奖项选择申请工作，我有5个奖项，其中有相关的描述，每个描述都有一个类型（span，p，div，h1等）。所以基于我们的数据库所说的线应该是我希望html创建自己。数据的布局方式是我有一个数据对象，它有一个图片数组，每个图片对象都有一个描述对象数组{Pictures [Descriptions []]}

＆＃34;图片＆＃34;：[{＆＃34; ID＆＃34;：9，＆＃34; IDName＆＃34;：＆＃34;邮差包＆＃34;＆＃34;描述＆＃34 ;：{{＆＃34; ID＆＃34;：7，＆＃34; Text＆＃34;：＆＃34;对于大多数15英寸笔记本电脑，信使包是一个完美的尺寸。 10口周年纪念标志在前袋上精美地展示。＆＃34;，＆＃34; DescriptionType＆＃34;：＆＃34; h3＆＃34;}，{＆＃34; ID＆＃34;：8 ，＆＃34;文字＆＃34;：＆＃34;拉链主隔层包括一个带衬垫的笔记本电脑套。＆＃34;，＆＃34; DescriptionType＆＃34;：＆＃34; p＆＃34;}，{＆＃ 34; ID＆＃34;：9，＆＃34; Text＆＃34;：＆＃34;带有组织面板的Velcro前袋。＆＃34;，＆＃34; DescriptionType＆＃34;：＆＃34; p＆＃34 ;}，{＆＃34; ID＆＃34;：10，＆＃34; Text＆＃34;：＆＃34; Pen循环和侧网格口袋。＆＃34;，＆＃34; DescriptionType＆＃34;：＆＃34; p＆＃34;}，{＆＃34; ID＆＃34;：11，＆＃34;文字＆＃34;：＆＃34;可调节肩带和两个提手。＆＃34;，＆＃34 ; DescriptionType＆＃34;：＆＃34; UL＆＃34;}，...

我已尝试直接使用这些值，但它不起作用：

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

然后我决定尝试一个指令。我可以让它返回文本，但从来没有我想要的描述类型的元素。

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

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

我也有一个使用How can I use Angular to output dynamic form fields?的ngSwitch的例子，但这似乎不适合我目前正在使用的双重重复组织。

我想要完成的是什么，如果是这样，任何人都有关于我应该关注的内容的指示？谢谢你的时间。

Answer 1

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

{{1}}

Answer 2

嵌套的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>

在angularjs

2 个答案: