1

我正在尝试将 AngularJS 集成到我正在试验的网站中。在原始代码中，我有一些重复的元素，所以我使用 AngularJS 来解决这个问题。代码如下：

<nav id=global>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href=#>Blog</a></li>
      <li id=projects>
        <a href="#">Projects</a>
        <ul id=dropdown-toggle>
          <li><a href=html/omnicode.html>Project1</a></li>
          <li><a href=#>Project2</a></li>
          <li><a href=#>Project3</a></li>
          <li><a href=#>Project4</a></li>
          <li><a href=#>Project5</a></li>
          <li><a href=#>Project6</a></li>
          <li><a href=#>Project7</a></li>
        </ul>
      </li>
      <li><a href="#">About</a></li>            
      <li><a href="#">Contact</a></li>            
    </ul>
  </nav>

我使用以下代码删除重复项：

<nav id=global ng-controller="NavListCtrl">
    <ul>
      <li ng-repeat="nav in navheaders" ng-switch on="isProjects(nav)">                            
        <a href={{nav.link}}>{{nav.name}}</a>
        <ul id=dropdown-toggle ng-switch-when="true">
          <script>var el = this.parent(); el.id = "projects"</script>
          <li ng-repeat="proj in projects">
            <a href={{proj.link}}>{{proj.name}}</a>
          </li>
        </ul>            
      </li>               
    </ul>
  </nav>

以防万一，这是我的 controller.js 文件的内容：

'use strict';

/* Controllers */

function NavListCtrl($scope) {
    $scope.navheaders = [
        {"name": "Home", 
         "link": "index.html"},
        {"name": "Blog",
         "link": "#"},
        {"name": "Projects",
         "link": "#"},
        {"name": "About",
         "link": "#"},
        {"name": "Contact",
         "link": "#"}
];

$scope.isProjects = function (nav) {
    return nav.name == "Projects";
}

$scope.projects = [
    {"name": "Project1",
     "link": "html/omnicode.html"},
    {"name": "Project2",
     "link": "#"},
    {"name": "Project3",
     "link": "#"},
    {"name": "Project4",
     "link": "#"},
    {"name": "Project5",
     "link": "#"},
    {"name": "Project6",
     "link": "#"},
    {"name": "Project7",
     "link": "#"}
  ];

}

有没有更好的方法来执行此操作？另外，我不确定如何将“id=projects”插入到包含“Projects”的 li 元素中。我的代码：

<script>var el = this.parent(); el.id = "projects"</script>

这样做是一次微不足道的尝试。任何帮助，将不胜感激。

4

1 回答 1

1

您可以使用 id 属性扩展您的模型：

$scope.navheaders = [
    {"name": "Home", 
     "link": "index.html"},
    {"name": "Blog",
     "link": "#"},
    {"name": "Projects",
     "link": "#",
     "id": "projects" },
    {"name": "About",
     "link": "#"},
    {"name": "Contact",
     "link": "#"}

];

<li ng-repeat="nav in navheaders" ng-switch on="isProjects(nav)" id="{{nav.id}}"> ...</li>
于 2013-05-25T18:58:22.677 回答