Angularjs ui-router 做一个中国下拉树

最新推荐文章于 2018-07-26 10:39:26 发布

氏张

最新推荐文章于 2018-07-26 10:39:26 发布

阅读量290

点赞数

分类专栏：初步学习文章标签： angularjs

本文链接：https://blog.csdn.net/z1061998175/article/details/80799775

版权

初步学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一共用了两个页面.
第一个是home.html

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="css/selecss.css" rel="stylesheet" />
</head>
<body>
    <a ui-sref="home.china">中国</a>
    <div ui-view></div>
</body>
</html>
<script type="text/ng-template" id="Are.html">
    <div class="main">
        <div ng-repeat="item in list track by $index">
            <div class="main_l" ng-click="sele(item.AreaCode,$index)" ng-bind="item.AreaName"></div>
            <div ng-if="$index==indexs">
                <div class="main_list" ng-if="show" ng-repeat="items in lists">
                    <div ng-bind="items.AreaName" ng-click="selec(items.AreaCode,$index)"></div>
                    <div ng-if="$index==indexss">
                        <div class="main_list_list" ng-if="shows" ng-repeat="itemss in listss" ng-bind="itemss.AreaName"> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

然后在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<Area> Get()
        {
            return db.Area.Where(r => r.ParentAreaCode == 1);
        }
        [ODataRoute("Area({id})")]
        public IQueryable<Area> 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%;
}