獲取新標籤功能在ng-repeat中工作Angular 1.5

我對角度有點新，但仍然試圖圍繞它來包裹我的頭。獲取新標籤功能在ng-repeat中工作Angular 1.5

無論如何，我試圖添加新標籤按鈕到一個動態創建的鏈接列表。我已經將新選項卡函數的名稱添加爲鏈接對象中的字符串，但這不起作用，並且我覺得我正以錯誤的方式接近它。

任何幫助將不勝感激。

//controller 
angular.module("myApp") 
.controller("nav", ["$scope", "$window", function ($scope, $window) { 

    $scope.newTabOne = function() { 
     $window.open('http://example.com/#/1', '_blank'); 
     return $scope; 
    }; 
    $scope.newTabTwo = function() { 
     $window.open('http://example.com/#/2', '_blank'); 
     return $scope; 
    }; 
    $scope.newTabThree = function() { 
     $window.open('http://example.com/#/3', '_blank'); 
     return $scope; 
    }; 

    $scope.links = [{name: 'Home', link: '#/Home', children: []}, 
        {name: 'Drop Down 1', link: '', children: [ 
          {name: 'One', link: '#/1', children: [], tab: 'newTabOne()'}, 
          {name: 'Two', link: '#/2', children: [], tab: 'newTabTwo()'} 
        ]}, 
        {name:'Drop Down 2', link:'', children:[ 
          {name: 'Three', link: '#/3', children: [], tab: 'newTabThree()'} 
        ]} 

    ]; 
}]) 

//view 
<ul class="nav-list"> 
    <li ng-repeat="nav in links" > 
     <a href="{{nav.link == '' ? 'javascript:;' : nav.link}}"> 
      <span class="text">{{topNav.name}}</span> 
      <i ng-if="nav.children.length > 0" class="arrow fa fa-angle-right right"></i> 
     </a> 
     <ul ng-if="nav.children.length > 0" class="inner-drop list-unstyled"> 
      <li ng-repeat="childNav in nav.children"> 
       <a href="{{childNav.link}}"> 
        <span class="text">{{childNav.name}}</span> 
       </a> 
       <button ng-click="{{childNav.tab}}"></button> 
      </li> 
     </ul> 
    </li> 
</ul>

來源

2016-07-08 BobSacamano

看看這個片段。我的建議

它不推薦使用$ EVAL，但如果你要評估的字符串作爲一個功能，這是做
在一個側面說明，使用NG-HREF當你有路來自控制器的價值。

angular.module("myApp", []) 
 
    .controller("navCtrl", ["$scope", "$window", 
 
    function($scope, $window) { 
 

 
     $scope.newTabOne = function() { 
 
     $window.open('http://example.com/#/1', '_blank'); 
 
     return $scope; 
 
     }; 
 
     $scope.newTabTwo = function() { 
 
     $window.open('http://example.com/#/2', '_blank'); 
 
     return $scope; 
 
     }; 
 
     $scope.newTabThree = function() { 
 
     $window.open('http://example.com/#/3', '_blank'); 
 
     return $scope; 
 
     }; 
 

 
     $scope.links = [{ 
 
      name: 'Home', 
 
      link: '#/Home', 
 
      children: [] 
 
     }, { 
 
      name: 'Drop Down 1', 
 
      link: '', 
 
      children: [{ 
 
      name: 'One', 
 
      link: '#/1', 
 
      children: [], 
 
      tab: 'newTabOne()' 
 
      }, { 
 
      name: 'Two', 
 
      link: '#/2', 
 
      children: [], 
 
      tab: 'newTabTwo()' 
 
      }] 
 
     }, { 
 
      name: 'Drop Down 2', 
 
      link: '', 
 
      children: [{ 
 
      name: 'Three', 
 
      link: '#/3', 
 
      children: [], 
 
      tab: 'newTabThree()' 
 
      }] 
 
     } 
 

 
     ]; 
 
    } 
 
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp"> 
 
    <div ng-controller="navCtrl"> 
 
    <ul class="nav-list"> 
 
     <li ng-repeat="nav in links"> 
 
     <a href="{{nav.link == '' ? 'javascript:;' : nav.link}}"> 
 
      <span class="text">{{topNav.name}}</span> 
 
      <i ng-if="nav.children.length > 0" class="arrow fa fa-angle-right right"></i> 
 
     </a> 
 
     <ul ng-if="nav.children.length > 0" class="inner-drop list-unstyled"> 
 
      <li ng-repeat="childNav in nav.children"> 
 
      <a href="{{childNav.link}}"> 
 
       <span class="text">{{childNav.name}}</span> 
 
      </a> 
 
      <button ng-click="$eval(childNav.tab)">in New Window</button> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body>

來源

2016-07-08 03:52:46 Srijith

獲取新標籤功能在ng-repeat中工作Angular 1.5

回答

相關問題