Question

我创建了一个包含各种输入的表单，允许用户构建组件的属性，查看组件的代码并在更新表单时呈现组件的预览。我遇到的问题是尝试输出复选框的结果以构建属性的属性。

这是用于预览和提供代码段的元素的HTML：

<a tabindex="0" class="btn btn-default " data-placement="top" role="button" data-toggle="popover"
   data-trigger=""
   title="Edit Tooltip text above"
   data-content="Edit popover content above">
   Popover Button Text
</a>

以下代码是预编译的Angular驱动模板

<a tabindex="0" class="btn {{btnClass.cssClass || 'btn-default'}} {{btnSize.cssClass || ''}}" data-placement="{{toolTipPosition.cssClass || ''}}" role="button" data-toggle="popover"
   data-trigger="{{item.enabled ? item.triggerEv+' ' : ''}}"
   title="{{popoverTitle || 'Edit Tooltip text above'}}"
   data-content="{{popoverContent || 'Edit popover content above'}}">
   {{popoverBtnText || 'Popover Button Text'}}
</a>

从第一个示例（已编译的代码）中可以看出，所有属性都按预期呈现，直到您到达data-trigger

数据属性的数据是通过复选框列表构建的：

<div ng-repeat="item in popoverTriggers">
    <input type="checkbox" ng-model="item.triggerEv" >
    <span>&nbsp;{{item.name}} </span>
</div>

和AngularJS模型如下：

$scope.popoverTriggers = [{
    name: "Hover",
    triggerEv: "hover",
    enabled: false
},{
    name: "Toggle",
    triggerEv: "click",
    enabled: false
}, {
    name: "Focus (Dismissible)",
    triggerEv: "focus",
    enabled: false
}, {
    name: "Manual",
    triggerEv: "manual",
    enabled: false
}];

例如，如果用户选择“悬停”和“聚焦（不允许）”，则预期输出为

data-trigger="focus hover"

我不确定我的模型是否不正确，但我认为即使我改变了popoverTriggers模型的结构，我仍然需要知道如何将每个选定的属性渲染为数据属性中的空格分隔列表。我不能在html属性中使用（或不能看到如何使用）ng-repeat。非常感谢任何帮助！

在AngularJS中输出数据属性的属性列表

0 个答案: