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属性存在。因此，例如第一个栏会指向一个网址，但其余的则不会因为它们是下拉。

这是我的html标记：

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

我的问题是，我可以为ng-href设置一个条件来评估url属性是否存在，然后绑定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>

只有在href的有效值时，才会将menu.url属性添加到您的锚标记中。如果{{menu.url}}解析为undefined，那么href属性将不会添加到您的元素中。

Answer 2

您可以将ng-if属性与此类函数一起使用

<a ng-href="{{menu.url}}">{{ menu.main }}<span ng-class="menu.icon" ng-if = "isExistUrl(menu.url)"></span></a>

在控制器中编写一个函数

$scope.isExistUrl = function(url){
   // Write logic here if exist return true else false
}

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

2 个答案: