用angularjs实现能够可修改的下拉菜单

这个是在前端开发群里的时候,看到有人想实现一个下拉菜单,并且要实现选项能够修改,当时我觉得应该用angular实现比较简单,最开始想到的是ng-options发现,只能够实现下拉,但是不能够实现点击修改选择,因为ng-options中是自动生成下拉菜单的,不能够修改,所有我用div span模拟了一个下拉菜单,想了两种方法,第一种是jquery的思想,点击span生成一个input元素,获取数据,然后消失把数据传递给span,但是经过试验,只能够实现一次,这样不是很好,我认为应该是dom的改动,影响到了指令中link函数中的element元素,不能够正常工作,所以有想了第二种,这个就完美实现了(没有太刻意写CSS比较丑,但是功能都有),同时有span和input这样靠class类名来控制位置,效果,消除和隐藏,这样就避免了第一种情况,下面是效果图。
第一张是没有修改的


用angularjs实现能够可修改的下拉菜单_第1张图片
1.JPG

第二张是正在修改的效果


用angularjs实现能够可修改的下拉菜单_第2张图片
2.JPG

第三张是修改后效果
用angularjs实现能够可修改的下拉菜单_第3张图片
3.JPG

最后上代码吧,然后我把里面的知识点说一下,




    
    
    
    
    
    
    


   

content

{{message}}

content

大家用的比较少的可能是$compile这个有两个用途,一个是生成angular的DOM元素的服务,并且连接scope的数据,如果不使用那就不连接数据,只是一个angularDOM,这需要传入当前scope,另外一个就是在指令中用来替代link函数的编译函数,这个网上资料都有,可以搜一下,或者改天我写一下。
angular.element这个的意思是包裹成angular元素。连接数据之前的angularDOM;

你可能感兴趣的:(用angularjs实现能够可修改的下拉菜单)