<!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>