1

実験中の Web サイトに 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": "#"}
  ];

}

この操作を実行するためのより良い方法はありますか? また、"Projects" を含む li 要素に "id=projects" を挿入する方法がわかりません。私のコード:

<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 に答える