關于angular-xeditable插件的使用小技巧一

吐槽:第一次在簡書寫學習心得,心里莫名緊張,不吐槽太多,直接開篇

先附上angular-xeditable 文檔地址 :http://vitalets.github.io/angular-xeditable/(里面有一些小demo,可以當作參考)

下面我寫一些我自己遇到覺得有用的小東東

***千萬不要忘記在module中依賴注入"xeditable"哦

一、初步配置xeditable 的主題樣式 (還可以自定義模板樣式哦)

在全局app.js run函數中聲明 editableOptions,并在函數中設置xeditable所用的主題

app.run(['editableOptions',function(editableOptions , editableThemes){

editableOptions.theme = 'bs3';

//如:editableThemes.errorTpl = '<div data-ng-if="$error">我是錯誤的</div>'

}])

查看源碼:定義模板

俺是分割線一

二 、實現根據輸入內容自動搜索(remote搜索哦)

在xeditable中有一個指令是 Typeahead ,在ng-repeat能實現自動搜索,

引入ui-bootstrap插件?

1、在全局module中依賴引入 "ui.bootstrap",并在index中引入 ui-bootstrap-tpls.min.js

2、在這其中e-form L的表單是可以用來控制文本的開關 testForm.$show() testForm.$cancel()

俺是分割線二

vm.search = function (test) {

? ? //開始http訪問?

? ? return array //返回查詢后的數組

};

三、在ng-repeat中如何使用 editable-select


在控制器中,

$scope.showTest = function(test){

var selected = $filter('filter')(vm.testList, { id: test });

return selected.length?selected[0].name:'';

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容