javascript - angularJS 仅在 javascript 对象中存在时才添加 ng-href

Question

我有以下 javascript 对象，我正在从中构建我的导航栏:

$scope.slo = [
    {
      main: "IJS",
      url: "https://www.ijs.si/ijsw"
    },
    {
      main: "ZIC",
      icon: "glyphicon glyphicon-triangle-bottom",
      submenu: [{
        one: "predstavitev",
        two: "osebje"
      }]
    },
    {
      main: "knjižnica",
      icon: "glyphicon glyphicon-triangle-bottom",
      submenu: [{
        one: "tiskane revije",
        two: "elektronske revije",
        three: "baze podatkov",
        four: "katalog(COBISS)"
      }]
    },
    {
      main: "storitve",
      icon: "glyphicon glyphicon-triangle-bottom",
      submenu: [{
        one: "bibliografije",
        two: "medknjižnična izposoja",
        three: "fotokopirnica"
      }]
    }
    ];

    $scope.eng = [{
      main: "IJS"
    },
    {
      main: "ZIC",
      icon: "glyphicon glyphicon-triangle-bottom",
      submenu: [{
        one: "introduction",
        two: "staff"
      }]
    },
    {
      main: "library",
      icon: "glyphicon glyphicon-triangle-bottom",
      submenu: [{
        one: "printed journals",
        two: "electronic journals",
        three: "databases",
        four: "catalogue(COBISS)"
      }]
    },
    {
      main: "services",
      icon: "glyphicon glyphicon-triangle-bottom",
      submenu: [{
        one: "bibliographies",
        two: "interlibrary loan",
        three: "copy room"
      }]
    }];

现在我想在我的 html 中添加一个 ng-href 标记，但前提是 url 属性存在。因此，例如，第一个栏将指向一个 url，但其余栏则不会，因为它们是下拉菜单。

这是我的 html 标记:

<a ng-href="{{!menu.url}}">{{ menu.main }}<span ng-class="menu.icon"></span></a>

我的问题是，我可以为 ng-href 设置一个条件来评估 url 属性是否存在，然后绑定(bind) urls 属性值吗？如果可以，我该怎么做？

使用我当前的标记，我只能得到:

<a href="false" class="ng-binding" ng-href="false">IJS<span ng-class="menu.icon"></span></a>
<a href="true" class="ng-binding" ng-href="true">ZIC<span class="glyphicon glyphicon-triangle-bottom" ng-class="menu.icon"></span></a>

Answer 1

您应该使用 ng-attr-* 有条件地将属性添加到您的标记中

<a ng-attr-href="{{menu.url}}">{{ menu.main }}<span ng-class="menu.icon"></span></a>

仅当 menu.url 具有有效值时，才会将 href 属性添加到您的 anchor 标记。如果 {{menu.url}} 解析为 undefined，则 href 属性将不会添加到您的元素。