吐槽:第一次在简书写学习心得,心里莫名紧张,不吐槽太多,直接开篇
先附上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:'';
}