angular $http 与form表单的select-->refine 

<!DOCTYPE html>
<html ng-app="a2_15">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <title>使用指令复制元素</title>
    <style type="text/css">
        body {
            font-size: 14px;
        }

        ul {
            list-style-type: none;
            width: 400px;
        }

        ul li {
            float: left;
            padding: 5px;
        }

        ul li span {
            float: left;
            width: 50px
        }
    </style>
    <script src="js/angular.min.js"></script>

</head>
<body>

<form name="temp_form" ng-controller="c2_15">
    <div>
        产品线:
        <select ng-model="a"
                ng-options="v.id as v.name for v in a_data"
                ng-change="a_change(a)">
            <option value="">--please select--</option>
        </select>
    </div>

    <div>
        产品:
        <select ng-model="b"
                ng-options="v.id as v.name for v in b_data"
                ng-change="b_change(b)">
            <option value="">--please select--</option>
        </select>
    </div>

    <div>
        版本:
        <select ng-model="c"
                ng-options="v.id as v.name for v in c_data"
                ng-change="c_change(c)">
            <option value="">--please select--</option>
        </select>
    </div>

    <div>
        代码:
        <select ng-model="d"
                ng-options="v.id as v.name for v in d_data"
                ng-change="d_change(d)">
            <option value="">--please select--</option>
        </select>
    </div>
</form>

<script type="text/javascript">
    var a2_15 = angular.module('a2_15', []);
    a2_15.controller('c2_15', ['$scope','$http', function ($scope, $http) {
        // 默认值
        $scope.a = "";
        $scope.b = "";
        $scope.c = "";
        $scope.d = "";

        // 填充选项
        // 填充a
        $http({
            method:'POST',
            url:'data/zz.php',
            params:{
                id:"",
                type:"pl"
            }
        }).success(function (data,status,headers,config) {
            $scope.a_data=data;
        });

        // change监听
        $scope.a_change=function (a) {
            // 填充b
            $http({
                method:'POST',
                url:'data/zz.php',
                params:{
                    id:$scope.a,
                    type:"p"
                }
            }).success(function (data,status,headers,config) {
                $scope.b = "";
                $scope.c = "";
                $scope.d = "";
                $scope.b_data=data;

            });
        };
        $scope.b_change=function (b) {
            // 填充c
            $http({
                method:'POST',
                url:'data/zz.php',
                params:{
                    id:$scope.b,
                    type:"r"
                }
            }).success(function (data,status,headers,config) {
                $scope.c="";
                $scope.d = "";
                $scope.c_data=data;
            });
        };
        $scope.c_change=function (c) {
            $http({
                method:'POST',
                url:'data/zz.php',
                params:{
                    id:$scope.c,
                    type:"c"
                }
            }).success(function (data,status,headers,config) {
                $scope.d="";
                $scope.d_data=data;
            });
        };
        $scope.d_change=function (d) {
        }
    }]);

</script>
</body>
</html>

 

posted @ 2016-07-24 21:01  永醉雨辰  阅读(215)  评论(0)    收藏  举报