angularjs select 自定义指令

前端之家收集整理的这篇文章主要介绍了angularjs select 自定义指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

由于很多下拉功能接口都一样,只有参数不同获取到不同的结果而已。为了避免在控制器中写一大堆重复的请求,所以把下拉功能做成指令。其中也碰到很多问题,好在有大神帮助下完成数据绑定的坑。

/**
 * select选择框
 * 根据字典选择
 * paramsCatalog : 传入的参数
 * pholder : 选择说明
 * ngModel : 跟外部ng-model绑定
 * onSelect: 跟外部事件绑定---外部使用ng-change不生效,ng-click会触发两次。这样绑定只会触发一次
 * 在外部对应的自己定义的fondType方法中参数item就是这里的repeat的item对象
 * 页面使用<select-dictionary params-catalog="IT.SUPPORT_TYPE"  pholder="请选择申请事项" ng-model="bo.supportType" on-select="findType" required></select-dictionary>
 */
m.directive('selectDictionary',function(){
    return {
        restrict:'AE',scope:{
            paramsCatalog: '@',pholder:'@',ngModel:'=',onSelect:"&"
        },require:'ngModel',template:'<select ng-model=ngModel>'+
                '<option value="" disabled>--{{pholder}}--</option>'+
                '<option ng-repeat="item in data" ng-value="item.entryCode">{{item.name}}</option>'+
                '</select>',controller:['$scope','common.Svc','$filter',function(scope,comSvc,$filter){
            if(!scope.paramsCatalog)return;
            //获取数据字典接口
             comSvc.common.find({
                "catalog": scope.paramsCatalog,"catalogCode": scope.paramsCatalog
                },function (data,successful) {
                    if(successful){
                        scope.data = $filter('orderBy')(data,'orderWeight');
                        var dictionaryObj = {};
                        angular.forEach(data || [],function(v,i) {
                                //把里面的v.entryCode字段作为保存的key
                            dictionaryObj[v.entryCode] = v;
                        });
                        //这里把局部对象保存到scope对象下,以便下面的link函数调用。
                        scope.dictionaryObj = dictionaryObj;
                    }
            });
        }],link:function(scope,elem,attrs,ngModel){
            ngModel.$formatters.push(function (value) {
                scope.ngModelChange(value);
                return value;
            });
            scope.ngModelChange = function(value) {
                if(ngModel.$isEmpty(value)) return;
                scope.onSelect && scope.onSelect()(scope.dictionaryObj[value])
            };
        }
    }
});

实现目的→根据不同参数调用同一接口,获取到不同的内容。在页面上的ng-model能绑定下拉选中对象的key,在页面on-select方法中对应的页面控制器方法中的参数就是下拉选中的整个对象内容

原文链接:https://www.f2er.com/angularjs/144808.html

猜你在找的Angularjs相关文章