Question

我有一个使用angular

渲染的引导菜单

这是我使用的控制器

function ($scope, $http) {
        $scope.MenuEntries = {}
        $http.get('/menu/')
        .success(
            function (response)
            {
                $scope.MenuEntries = response.data;
                console.log($scope.MenuEntries);
            })
        .error();
    }

这是我的模板

  <ul class=nav>
      <li ng-repeat='entry in MenuEntries'>
         <li>
            <a href='{{entry.link}}'>{{entry.display_name}}<b class=caret></b></a>
            <ul class='dropdown-menu'>
               <li ng-repeat='child in entry.children'>
                  <a href='{{child.link}}'>{{child.display_name}}</a>
               </li>
            </ul>
         </li>
      </li>
  </ul>

这是我的回复，

{
"data": [
    {
        "children": [], 
        "display_name": "Home", 
        "link": "/#/", 
    }, 
    {
        "children": [], 
        "display_name": "Logout", 
        "link": "/logout/", 
    }, 
    {
        "children": [
                "display_name": "View Attendance", 
                "link": "/#/attendance/view", 
            }, 
            {
                "display_name": "Attendance Summary", 
                "link": "/#/attendance/summary", 
            }
        ], 
        "display_name": "Attendance", 
        "link": "#", 
    }
]
}

这会在控制台中记录为具有完美JS对象的完美JS数组

最后，这是我生成的HTML

    <ul class="nav">
        <!-- ngRepeat: entry in MenuEntries -->
          <li ng-repeat="entry in MenuEntries" class="ng-scope"></li>
        <!-- end ngRepeat: entry in MenuEntries -->
          <li ng-repeat="entry in MenuEntries" class="ng-scope"></li>
        <!-- end ngRepeat: entry in MenuEntries -->
          <li ng-repeat="entry in MenuEntries" class="ng-scope"></li>
        <!-- end ngRepeat: entry in MenuEntries -->
        <li>
          <a href=""><b class="caret"></b></a>
          <ul class="dropdown-menu">
             <!-- ngRepeat: child in entry.children -->
          </ul>
        </li>
    </ul>

为什么我的数据不在模板中填充？

Answer 1

使用ng-repeat，您不应重复在其模板中应用指令的元素。在您的情况下，这意味着您只需删除紧跟<li>之后的<li ng-repeat>：

<li ng-repeat='entry in MenuEntries'>
  <a href='{{entry.link}}'>{{entry.display_name}}<b class=caret></b></a>
  <ul class='dropdown-menu'>
    <li ng-repeat='child in entry.children'>
      <a href='{{child.link}}'>{{child.display_name}}</a>
    </li>
  </ul>
</li>

顺便说一句，如果<ul>为空，您可以考虑完全删除与儿童相关的entry.children。例如：

<!-- the same code as above -->
<ul ng-if="entry.children.length" class='dropdown-menu'>
  <li ng-repeat='child in entry.children'>
    <a href='{{child.link}}'>{{child.display_name}}</a>
  </li>
</ul>

Answer 2

更新MenuEntries后尝试使用$scope.$apply();。必须在页面上应用新值。

ng-repeat重复但不评估数据字段

2 个答案: