Neu-Tab-Funktion in ng-repeat in Angular arbeiten 1.5

Ich bin etwas neu zu kantig, und immer noch versucht, meinen Kopf darum herum zu wickeln.Neu-Tab-Funktion in ng-repeat in Angular arbeiten 1.5

Wie auch immer, ich versuche, neue Registerkarten-Schaltflächen zu einer dynamisch erstellten Liste von Links hinzuzufügen. Ich habe den Namen der neuen Tab-Funktion als String im Links-Objekt hinzugefügt, aber das funktioniert nicht, und ich habe das Gefühl, dass ich mich falsch annähere.

Jede Hilfe würde sehr geschätzt werden.

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

Quelle

2016-07-08 BobSacamano

Schauen Sie sich dieses Snippet an. Meine Empfehlungen

Sein NICHT empfohlen $ eval zu verwenden, aber wenn Sie die Zeichenfolge als eine Funktion ausgewertet werden sollen, ist dies der Weg, es
Auf einer Seite zur Kenntnis, Verwendung ng-href zu tun, wenn Sie die haben Wert kommt von der Steuerung.

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>

Quelle

2016-07-08 03:52:46 Srijith

Neu-Tab-Funktion in ng-repeat in Angular arbeiten 1.5

Antwort

Verwandte Themen