angularjs 二级联动 并且动态添加select下拉框

angularjs 二级联动 并且动态添加select下拉框_第1张图片

代码:

<div class="form-group"  id="img2">
            <p class="accordion-inner">
            <p class="alert alert-info fade in" ng-repeat="permission in permissions">
                <label class="col-sm-2 control-label">可见部门</label>
                <select  ng-model="permission.grantee"  class="grantees  sls"  name="department"  id="major"
                         ng-options=" item.departmentId as item.departmentName for item in dertList" ng-change="dertListMap(permission.grantee)">
                    <option value="">请选择</option>
                </select>
                <select class="grantees sls" name="id" id="position"
                        ng-options="option.departmentId as option.departmentName for option in dertListss[permission.grantee]"
                        ng-model="permission.port1">
                </select>
                <button class="btn" type="button" ng-click="delPermission($index)">删除</button>

            </p>
            <p>
                <div class="xinz">
                    <button class="btn" style="margin-top: 7px" type="button" ng-click="addPermission($index)">增加</button>
                </div>
            </p>

            <br>

            </p>
        </div>

js:

//部门
        $scope.items = [];    //初始化数组,以便为每一个ng-model分配一个对象
        var i = 0;
        $scope.getResult = function () {      //计算输入框的总值
            var result = 0;
            angular.forEach($scope.items, function (item, key) {
                result += parseInt($scope.items[key]);
            });
            $scope.result = result;
            console.log($scope.result)
        };

        $scope.Fn = {
            add: function () {         //每次添加都要给items数组的长度加一
                $scope.items[i] = 0;
                i++;
            },
            del: function (key) {      //每次删除一个输入框都后要让i自减,否则重新添加时会出bug
                console.log(key);
                $scope.items.splice(key, 1);
                i--;
                $scope.getResult();    //每次删除时得重新计算总值
            }
        };
//增加许可访问p
        $scope.permissions = [{grantee: "", port1: "", port2: "", port3: ""}];
        $scope.addPermission = function ($index) {
          $scope.permissions.splice($index + 1, 0, {grantee: "", port1: "", port2: "", port3: ""});
           // $scope.permissions.splice($scope.permissions.length + 1, 0, {grantee: "", port1: "", port2: "", port3: ""});
            console.log($scope.permissions);


        };


//删除许可访问p

        $scope.delPermission = function ($index) {

            $scope.permissions.splice($index, 1);

        };

        $scope.listCityByProvince=function(selected1){
            var data = {
                departmentId:selected1?selected1:"",
            };
            $http.post($scope.prefix + 'getDepartment', data)
                    .success(function (response) {
                        $scope.dertList=response.data;

                    }).error(function () {
            });
        };
        $scope.dertListss={}
        $scope.dertListMap=function(department){
          //  console.log(department)
            var data = {
                departmentId:department
            };
            $http.post($scope.prefix + 'getDepartment', data)
                    .success(function (response) {
                        $scope.dertListss[department]=response.data;

                    }).error(function () {
            });
        };

  /* 保存 */
        $scope.save = function () {
            var objs = $scope.permissions;
            console.log(objs);
            $scope.departmentIds=[];
            angular.forEach(objs, function(data){
                // console.log(data.grantee);
                $scope.departmentIds.push(data.port1);
                console.log( $scope.departmentIds)
            });
            var fd = toFormData($scope.formData);
            fd.append("file",document.getElementById('iconFile').files[0]);
            fd.append("departmentIds",  $scope.departmentIds);
            console.log(fd)
         //   if(valid()) {
                new ShowDlog().prompt({
                    icon:"waitting",
                    msg:"正在保存...",
                    done:function(){},
                    t:60*1000
                });
                $http({
                    method:"post",
                    url:$scope.prefix + 'addFlash',
                    data:fd,
                    headers:{"Content-Type": undefined},
                    transformRequest:angular.identity
                }).success(function (data) {
                    $dlog.close();
                    if ("200" == data.code) {
                        new ShowDlog().prompt({
                            icon:"success",
                            msg:"保存成功!",
                            done:function(){
                                $scope.cancel();
                            },
                            t:1500
                        });
                    } else {
                    }
                }).
                error(function () {
                })
        //    }
        };

你可能感兴趣的:(angularjs 二级联动 并且动态添加select下拉框)