Angularjs ui-router 做一个中国下拉树
一共用了两个页面.
第一个是home.html
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>中国地区表title><meta charset="utf-8" />
head>
<body ng-app="app"><div ui-view>div>
body>
html>
<script src="js/js/js/angular/angular.min.js">script>
<script src="js/js/angular-ui-router.min.js">script>
<script src="js/controller.js">script>第二个页面是Me.html
"Content-Type" content="text/html; charset=utf-8" />然后在controller.js里面写angular的路由以及控制器
var app = angular.module('app', ['ui.router']);
app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise("/home")$stateProvider.state("home", {url: "/home",templateUrl: "/Me.html",}).state("home.china", {url: "/china",views: {"": {templateUrl: "Are.html",controller: "Prl"},}})}])
app.controller("Prl", ["$scope", "$http", function ($scope, $http) {$http.get("odata/Area").then(function (data) {$scope.list = data.data.value;})$scope.show = false;$scope.shows = false;$scope.sele = function (name, index) {$scope.indexs = index;$scope.show = !$scope.show;$scope.shows = false;$http.post("odata/Area(" + name + ")").then(function (data) {$scope.lists = data.data.value;}, function () {console.log("error")})}$scope.selec = function (name, index) {$scope.indexss = index;$scope.shows = !$scope.shows;$http.post("odata/Area(" + name + ")").then(function (data) {$scope.listss = data.data.value;}, function () {console.log("error")})}}])
返回的数据就是集合,当然这地方后台方法用了两个
[EnableQuery]public IQueryable Get(){return db.Area.Where(r => r.ParentAreaCode == 1);}[ODataRoute("Area({id})")]public IQueryable post([FromODataUri]int id){return db.Area.Where(r => r.ParentAreaCode == id);}css样式表
.main_list {color: red;cursor: pointer;margin-left: 40px;
}.main_list_list {color: gray;cursor: pointer;margin-left: 50px;
}.main_l {color: blueviolet;cursor: pointer;margin-left: 20px;
}.main {width: 23%;
}
地区表的表结构是
AreaCode AreaName ParentAreaCode
0 中国 1
1 山东 12
12 济南 123
sql表里是这样的一个表结构
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！