Question

我正在创建一个带有MVC项目的简单AngularJS页面，该页面从数据库表中检索项目并将它们显示为动态菜单。

只要项目数少于10 ??

，该列表就能完美运行

当我尝试解决这个问题时，我想出了一个解释，即AngularJS没有读取数字作为数字！所以这种比较并不合适。

更具体地说，我有下表：

菜单应列为：

Page1 - Page2 - Page3 - Page4 - Page5 - Page6 - Page7 - Page8 - Page9
          |       |
          |       |
          |     Page14
          |     Page15
          |
          |
        Page10 - Page11 - Page12 - Page12
                            |
                            |
                          Page13

但我并没有真正表现出我所期待的......

在 Page1 下，我有 Page13
Page13 也列在 Page2 下

以下是获取列表并显示它的代码：

MVC控制器

namespace MVCAngularDynamicMenu.Controllers
{
public class HomeController : Controller
{
    public ActionResult Index() {
        return View();
    }

    public JsonResult GetSiteMenu()
    {
        using (MyDatabaseEntities dc = new MyDatabaseEntities())
        {
            var menu = dc.SiteMenus.ToList();
            return new JsonResult { Data = menu, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
    }
}
}

JS控制器

var app = angular.module('MyApp', []);
app.controller('menuController', ['$scope', '$http', function ($scope, $http) {
$scope.SiteMenu = [];
$http.get('/home/GetSiteMenu').then(function (response) {
    $scope.SiteMenu = response.data;
}, function (error) {
    alert('Error');
})
}])

视图

<div ng-app="MyApp">
<div ng-controller="menuController">
    <script type="text/ng-template" id="treeMenu">
        <a href="{{menu.Url}}">{{menu.Name}}</a>
        <ul ng-if="(SiteMenu | filter:{ParentID : menu.ID}).length > 0">
            <li ng-repeat="menu in SiteMenu | filter:{ParentID : menu.ID}" ng-include="'treeMenu'"></li>
        </ul>
    </script>
    <ul class="main-navigation">
        <li ng-repeat="menu in SiteMenu | filter:{ParentID : 0}" ng-include="'treeMenu'"></li>
    </ul>

</div>

这是返回的JSON的样子

[
{"ID":1,"Name":"Page1","Url":"/p1","ParentID":0},
{"ID":2,"Name":"Page2","Url":"/p2","ParentID":0},
{"ID":3,"Name":"Page3","Url":"/p3","ParentID":0},
{"ID":4,"Name":"Page4","Url":"/p4","ParentID":0},
{"ID":5,"Name":"Page5","Url":"/p5","ParentID":0},
{"ID":6,"Name":"Page6","Url":"/p6","ParentID":0},
{"ID":7,"Name":"Page7","Url":"/p7","ParentID":0},
{"ID":8,"Name":"Page8","Url":"/p8","ParentID":0},
{"ID":9,"Name":"Page9","Url":"/p9","ParentID":0},
{"ID":10,"Name":"Page10","Url":"/p10","ParentID":2},
{"ID":11,"Name":"Page11","Url":"/p11","ParentID":2},
{"ID":12,"Name":"Page12","Url":"/p12","ParentID":2},
{"ID":13,"Name":"Page13","Url":"/p13","ParentID":12},
{"ID":14,"Name":"Page14","Url":"/p14","ParentID":3},
{"ID":15,"Name":"Page15","Url":"/p15","ParentID":3}
]

同样，我怀疑问题在于将ID和PartnerID字段转换为字符串，而它们是int。但我不太确定

当项目数量> 1时，AngularJS动态菜单不起作用。 10

0 个答案: