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

angularJS adding ng-href only if present in javascript object

本文关键字：添加 ng href 存在 仅在 javascript 对象 angularJS      更新时间：2023-09-26

我有以下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属性是否存在，然后绑定url属性值吗？如果可以，我该怎么做？

以我目前的标记，我只得到：

<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>

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

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

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

您可以将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
}
相关文章：