表格插件 ng-table
功能：
表格：支持分頁、查找、排序等 地址.
使用：
1.安裝
bower install ng-table
2.引入
在首頁中引入ng-table腳本文件
<script src="bower_components/ng-table/dist/ng-table.min.js"></script>
3.在需要使用的模塊中引入 ngTable
在module 中引入ngTable模塊，在chontroller中引入NgTableParams
var module = angular.module('myStore', ['ui.router', 'ngTable']).controller('WxPages', ['$scope', '$http', 'NgTableParams', '$mdDialog',function($scope, $http, NgTableParams, $mdDialog)
4.初始化
在chontroller中初始化NgTable，表格中的數據必須通過getData參數來獲取，在函數中通過$defer返回值，（官方還提供了data參數，但是實際中可能因為使用中無效）
params參數提供了分頁查詢所需的page（當前頁數）、count（每頁顯示數量）參數
$scope.tableParams = new NgTableParams({page: 1, // show first pagecount: 10 // count per page}, {total: data.length,getData: function($defer, params) {var newDate = data.slice((params.page() - 1) * params.count(), params.page() * params.count());$defer.resolve(newDate);}});
5.頁面使用
在標簽內添加 ng-table="tableParams"綁定參數，標題通過title傳遞，需注意添加兩層引號
<table class="table table-hover " ng-table="tableParams"><tr ng-repeat="item in $data track by item.id" align="center"><td title="'#'">{{item.id}}</td><td title="'操作'"><a href="#wxPageEdit/{{item.id}}">編輯</a><a href="" ng-click="showConfirm($event,item.id)">刪除</a></td><td title="'標題'">{{item.title}}</td><td title="'瀏覽量'">{{item.pv}}</td><td title="'創建時間'">{{item.createDate}}</td></tr></table>
富文本編輯器 百度的ueditor
基本
功能強大的富文本編輯器，配置和擴展功能強大 地址.
使用
1.下載
地址.
文檔.
2.引入
在頁面中引入
<!-- 配置文件 -->
<script src="bower_components/ueditor/ueditor.config.js"></script>
<!-- 主文件 -->
<script src="bower_components/ueditor/ueditor.all.min.js"></script>
<!-- 樣式渲染 -->
<script src="bower_components/ueditor/ueditor.parse.min.js"></script>
3.使用
在代碼中通過 UE.getEditor('container',params)形式生成編輯器，container為放置ueditor的元素的id，toolbars:[]數組為要顯示的菜單項，詳細列表見ueditor.config.js文件
通過監聽contentChange事件，監測文本內容的變化，賦值給預覽界面
var ue = UE.getEditor('edit-rich-text', {toolbars: [['fullscreen', 'source', '|', 'undo', 'redo', '|','bold', 'italic', 'underline', , 'strikethrough', 'removeformat', 'autotypeset', 'blockquote', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|','paragraph', 'fontfamily', 'fontsize', '|','justifyleft', 'justifycenter', 'justifyright', '|','link', '|',// 'insertimage','emotion', 'insertvideo', 'background', '|','horizontal', '|','inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',]],elementPathEnabled: false,});var htm = null;ue.on('contentChange', function() {html = ue.getContent();if (html.length > 0) {$('.custom-richtext').html(html);}});
4.擴展
富文本編輯器中的圖片上傳功能，配置較為復雜，界面也不符合需求，所以借助插件提供的擴展功能，增加一個圖標，調用自己寫的圖片管理界面，實現圖片的上傳和選擇
UE.registerUI('button', function(editor, uiName) {//注冊按鈕執行時的command命令，使用命令默認就會帶有回退操作editor.registerCommand(uiName, {execCommand: function() {alert('execCommand:' + uiName)}});//創建一個buttonvar btn = new UE.ui.Button({//按鈕的名字name: "上傳圖片",//提示title: "上傳圖片",//添加額外樣式，指定icon圖標，這默認使用原本圖片上傳的iconcssRules: 'background-position: -380px 0;',//點擊時執行的命令onclick: function() {//這里可以不用執行命令,做你自己的操作也可//調用我自己寫的模態框$scope.showImgUpload();}});//因為你是添加button,所以需要返回這個buttonreturn btn;});<!-- angular material的對話框 -->
$scope.showImgUpload = function(ev) {var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen;$mdDialog.show({controller: ImgDialogController,templateUrl: 'store/common/imageUploadDialog.html',parent: angular.element(document.body),targetEvent: ev,clickOutsideToClose: true,fullscreen: useFullScreen})// 可以獲取dialog傳遞回來的值，此處為圖片路徑.then(function(result) {var imgSrc = 'images/' + result;ue.setContent('<img src="' + imgSrc + '" alt="" style="width:100%">', true);}, function() {// 用戶點擊取消的});$scope.$watch(function() {return $mdMedia('xs') || $mdMedia('sm');}, function(wantsFullScreen) {$scope.customFullscreen = (wantsFullScreen === true);});};
angular-material
參考官方文檔.
主要使用了 datepicker和dialog
圖片上傳，在線預覽裁剪頭像ng-img-crop
參考官方文檔.
<!-- 頁面 --><div class="img-pro lflex" ng-show="avaImg"><div class="flex1"><div class="image-box-before lflex flex-c "><img-crop image="avaImg" area-type="{square}" result-image="myCroppedImage"></img-crop></div><input type="file" name="" id="avaImg" fileread="avaImg" style="visibility: hidden"></div><div class="flex1"><h4 class="title">頭像預覽</h4><div class="img-preview"><img ng-src="{{myCroppedImage}}" /></div><div class="img-preview circle"><img ng-src="{{myCroppedImage}}" /></div></div>
</div><!-- 腳本 -->
// 保存用戶上傳圖標的base64編碼 原圖
$scope.avaImg = "";
// 處理后的圖片
$scope.myCroppedImage = '';
轉載于:https://www.cnblogs.com/NearTheSea/p/5500631.html
總結
以上是生活随笔為你收集整理的近期工作中使用到的插件总结的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
