不动态填充链接

时间:2017-02-17 14:31:45

标签: angularjs

我正在尝试在AngularJs中动态显示链接。

我的小提琴在这里:http://jsfiddle.net/ADukg/10228/

由于某些原因,标记不会填充标记中的值,但值是来自控制器的属性。

标记

<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
    <div class="collapse navbar-collapse" uib-collapse="navCollapsed">
        <ul class="nav navbar-nav navbar-right">
            <li ng-repeat="leftLink in leftLinks">
                <a href="#!{{leftLink.Url}}">{{leftLink.Text}}</a>
                <li uib-dropdown ng-if="leftLink.subMenus">
                    <a href="#" uib-dropdown-toggle>Hello               
                            <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-repeat="subMenu in leftLink.subMenus">
                            <a href="#!{{subMenu.Url}}">{{subMenu.Text}}</a>
                            <li role="separator" class="divider"></li>
                        </li>
                    </ul>
                </li>
            </li>
        </ul>
    </div>
</div>

Angular Js

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.leftLinks = [
      {
        subMenus: [
          {
            Text: "Profile",
            Url: "/profile"
          },
          {
            Text: "Change Password",
            Url: "/change-password"
          },
          {
            Text: "Logout",
            Url: "#"
          }
        ]
      }
    ];
}

1 个答案:

答案 0 :(得分:2)

代码中存在一些错误。请参阅jsfiddle:http://jsfiddle.net/ADukg/10232/

它没有调用控制器,因此,我更改为.controller("Myctrl",function ($scope)并在第一个元素的html ng-controller="Myctrl"上实例化它。另一个错误是变量名称为leftLink而不是leftLinks

您必须检查自己的HTML代码,因为您无法将li直接放在另一个li内,但这不会导致错误。

var myApp = angular.module('myApp',[])
.controller("Myctrl",function ($scope) {
    $scope.leftLinks = 
      {
        subMenus: [
          {
            Text: "Profile",
            Url: "/profile"
          },
          {
            Text: "Change Password",
            Url: "/change-password"
          },
          {
            Text: "Logout",
            Url: "#"
          }
        ]
      };
});