angularjs模態(tài)框的使用代碼實(shí)例
這篇文章主要介紹了angularjs模態(tài)框的使用代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
編寫html頁(yè)面
1.觸發(fā)模態(tài)框的點(diǎn)擊事件
<div>
<button type="button" class="btn btn-primary" ng-click="openAddModal()" data-toggle="modal"
data-target="#documentOprModal" style="margin-left: 10px;float:left">
<i class="glyphicon glyphicon-plus"></i>{{ 'i18n.add' | translate }}
</button>
</div>
2.模態(tài)框頁(yè)面
<div class="modal fade" id="documentOprModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" role="document" style="width: 600px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> 文檔入庫(kù)</h4>
</div>
<div class="modal-body">
<!--開(kāi)發(fā)-->
<form name="docForm" id="docForm" novalidate>
<!-- 分類 -->
<div class="form-group">
<label class="col-lg-12 col-md-12 col-xs-12" style="padding: 0;">分類:</label>
<div class="input-group col-lg-12 col-md-12 col-xs-12">
<div class="input-group">
<input type="text" ng-model="document.classification_name" class="form-control"
placeholder="選擇分類">
<div class="input-group-btn">
<button type="button" class="btn btn-default" style="height: 30px"
ng-click="toggleDetail()"> <span class="caret"></span></button>
</div>
</div>
<div ng-show="isShowDetail" style="position: absolute;z-index: 9999;width: 560px;">
<div class="panel panel-default">
<div class="panel-body list-group list-group-contacts">
<div>
<ul id="classify-tree" class="ztree"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 星級(jí) -->
<div class="form-group">
<label class="col-lg-12 col-md-12 col-xs-12" style="padding: 0;">星級(jí):</label>
<div class="input-group col-lg-12 col-md-12 col-xs-12">
<ui-select ng-model="document.starGrade" theme="selectize">
<ui-select-match placeholder="請(qǐng)選擇星級(jí)">
<span ng-bind="$select.selected.name"></span>
</ui-select-match>
<ui-select-choices
repeat="item.id as item in (starGrades | filter: $select.search) track by $index ">
<div ng-bind-html="item.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
</div>
<!-- 井號(hào) -->
<div class="form-group">
<label for="jhText">井號(hào):</label>
<input type="text" class="form-control" id="jhText" ng-model="document.jh">
</div>
<!-- 作者 -->
<div class="form-group">
<label for="authorText">作者:</label>
<input type="text" class="form-control" id="authorText" ng-model="document.author">
</div>
<!-- 單位 -->
<div class="form-group">
<label for="unitText">單位:</label>
<input type="text" class="form-control" id="unitText" ng-model="document.unit">
</div>
<!-- 日期 -->
<div class="form-group">
<label for="writeDate">寫作日期:</label>
<input type="date" class="form-control" id="writeDate" ng-model="document.writeDate">
</div>
<!-- 簡(jiǎn)介 -->
<div class="form-group">
<label for="introductionTextArea">簡(jiǎn)介:</label>
<textarea class="form-control" id="introductionTextArea" ng-model="document.introduction"
rows="5" cols="60"></textarea>
</div>
<!-- 可能的查詢關(guān)鍵字 -->
<div class="form-group">
<label for="keyPackageTextArea">可能的查詢關(guān)鍵字:</label>
<textarea class="form-control" id="keyPackageTextArea" ng-model="document.keyPackage" rows="5"
cols="60"></textarea>
</div>
<!-- 文件 -->
<div class="form-group">
<div id="inputContent">
<input id="importFile" type="file" name="file" class="file-loading">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="submitFileInfo()"><i class="fa fa-check"></i>{{ 'i18n.save'
| translate }}
</button>
<button type="button" class="btn btn-default" data-dismiss="modal" style="margin: 0px 20px;"><i
class="fa fa-ban"></i>{{
'i18n.cancel' | translate }}
</button>
</div>
</div>
</div>
</div>
3.編寫對(duì)應(yīng)的js
/**
* 點(diǎn)擊 添加事件打開(kāi)模態(tài)框
*/
function openAddModal() {
$('#documentOprModal').modal({
show: true,
keyboard: false,
backdrop: 'static'
});
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持我們。
上一篇:JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能
欄 目:JavaScript
下一篇:微信小程序跨頁(yè)面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過(guò)程解析
本文標(biāo)題:angularjs模態(tài)框的使用代碼實(shí)例
本文地址:http://www.jygsgssxh.com/a1/JavaScript/9455.html
您可能感興趣的文章
- 01-10使用JS location實(shí)現(xiàn)搜索框歷史記錄功能
- 01-10微信小程序自定義模態(tài)彈窗組件詳解
- 01-10原生JS實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能
- 01-10vue element-ui實(shí)現(xiàn)input輸入框金額數(shù)字添加千分位
- 01-10純js+css實(shí)現(xiàn)仿移動(dòng)端淘寶網(wǎng)站的彈出詳情框功能
- 01-10Vue 實(shí)現(xiàn)分頁(yè)與輸入框關(guān)鍵字篩選功能
- 01-10Element-UI+Vue模式使用總結(jié)
- 01-10Nodejs封裝類似express框架的路由實(shí)例詳解
- 01-10bootstrap實(shí)現(xiàn)嵌套模態(tài)框的實(shí)例代碼


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹(shù)的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 04-02javascript點(diǎn)線,點(diǎn)線的代碼
- 04-02javascript潛力,javascript強(qiáng)大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報(bào),JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁(yè)面
- 04-02javascript前身,javascript的前身
隨機(jī)閱讀
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 04-02jquery與jsp,用jquery
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 01-10C#中split用法實(shí)例總結(jié)
- 01-10delphi制作wav文件的方法
- 01-11Mac OSX 打開(kāi)原生自帶讀寫NTFS功能(圖文
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-10SublimeText編譯C開(kāi)發(fā)環(huán)境設(shè)置


