关于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 = '

我是错误的
'

}])

查看源码:定义模板

关于angular-xeditable插件的使用小技巧一_第1张图片
俺是分割线一

二 、实现根据输入内容自动搜索(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()

关于angular-xeditable插件的使用小技巧一_第2张图片
俺是分割线二

vm.search = function (test) {

    //开始http访问 

    return array //返回查询后的数组

};

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


关于angular-xeditable插件的使用小技巧一_第3张图片

在控制器中,

$scope.showTest = function(test){

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

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

}

你可能感兴趣的:(关于angular-xeditable插件的使用小技巧一)