加载 Angular 的 UI 引导模式与动态内容
Load Angular's UI Bootstrap modal with dynamic content
我正在尝试使用Angular和UI Bootstrap使模态动态加载模板,但我什至不知道该怎么做。
这是我到目前为止的代码:
小提琴:https://jsfiddle.net/fwpcsfg7/8/
我想要的是拥有以下ng-repeat
:
<div ng-app="MyApp" ng-controller="ExampleController as example">
<!-- load a different template (partial) inside the modal depending on the value of item.type -->
<div class="someClass" ng-repeat="item in example.items" ng-click="example.loadModal(item.templateName)">Modal {{item.type}}</div>
</div>
<!-- The modal that would change it's content depending on the item type-->
<div class="modal" ng-controller="ModalController as modal" ng-include src="example.modalTemplate+'.html'"></div>
<!-- Defining Angular cached partials -->
<script type="text/ng-template" id="modalType1.html">
<input ng-model="item.name"></input>
</script>
<script type="text/ng-template" id="modalType2.html">
<input ng-model="item.name"></input>
<input ng-model="item.age"></input>
</script>
<script type="text/ng-template" id="modalType3.html">
<input ng-model="item.name"></input>
<input ng-model="item.name"></input>
</script>
<script type="text/ng-template" id="modalType4.html">
<input ng-model="item.name"></input>
<input ng-model="item.lastName"></input>
<input ng-model="item.country"></input>
<input ng-model="item.location"></input>
</script>
我想为每个item.type
值显示一个具有不同内容的模态。如果你能给我一个基本的小提琴,我会很高兴的。
现实生活中的情况更复杂,所以我需要将模态的内容加载为模板(也许为每个item.type
制作模态更容易?
编辑:我不知道如何解决的问题之一是:如果我在其他完全不同的控制器上,如何访问item
属性?
如何在使用 angular js 单击时将 html 模板附加到div/指令可能会有所帮助?
有一些 X 变量来指示要加载的模板。并将 ng-include 与 src="X" 一起使用
相关文章:
- 试图在引导模式内动态生成图表,得到offsetWidth错误
- 执行动态模式弹出
- 如何动态更改React Bootstrap模式的内容
- 动态加载引导模式主体
- 谷歌浏览器模式正则表达式在使用setCustomValidity动态创建表单时不起作用
- 设置多个观察程序以触发动态事件的角度替代解决方案 - 优化的观察者模式
- 在 jQuery 和 jqueryUI 模式框中动态更改 id
- 如何使模式窗口打开动态内容并更改url
- 动态添加ng模式,缺少验证类
- 动态淘汰模板模式潜在缺陷
- lightGallery动态模式不适用于Firefox和Safari
- 动态模式下的 lightGallery:单击时加载的图像不正确
- 调用动态模式引导程序进行登录
- 使用动态模式从JSON加载
- 设置Regexp中的动态模式
- 动态模式与表单 - 不屑一顾的发布数据
- javascript查找并替换字符串中的动态模式
- 动态模式Javascript
- 在 fmt:formatNumber 中获取动态模式
- 如何将nlobjColumn的动态模式.setURL工作