如何在AngularJS中按類索引div？

我是AngularJS的新手。這是我的第一個Plunker。如何在AngularJS中按類索引div？

我想使它如此以便如果用戶單擊節中的鏈接，鏈接的值將顯示在結果中。其他兩個結果應該清除它們的值。

我找不到任何關於如何通過索引引用類中的特定項目的文檔。在jQuery中，我通常會做這樣的事情......

// get this index of the thing that was clicked 
$this = $(this), 
Idx = $BUTTONS.BigButtons.index($this), 
ThisButton.eq(Idx).doSomething(); 



<body ng-controller="MainController as main"> 

<div class="title" ng-repeat="i in [1,2,3]"> 
    <p>This is section {{i}}</p> 
    <ul> 
     <li ng-repeat="j in [1,2,3]"> 
     <a href="" ng-click="main.displayContent(i, j)">section {{i}} - link {{j}}</a></li> 
    </ul> 
    <div class="results" ng-bind="main.results"></div> 
</div> 
</body> 


var app = angular.module('controllerAsDemo', []); 
app.controller('MainController', function() { 

this.results = "Lame default"; 

this.displayContent = function(firstIdx, secondIdx) { 

this.results = "populate section " 
    + firstIdx 
    + " with the number " 
    + secondIdx 
    + " - other two results should be empty" 
    ; 

}; 

});

這裏是Demo

來源

2016-08-18 Evik James

我想你不應該尋找類來實現你想要什麼。角度重複和其他各種指令讓你有能力做到這一點。

我已經觸摸了你的代碼，它現在有效。見下文。

var app = angular.module('controllerAsDemo', []); 
 

 
app.controller('MainController', function($scope) { 
 

 
    $scope.name = 'Cool Clicking'; 
 

 
    $scope.results = []; 
 
    
 
    $scope.displayContent = function(firstIdx, secondIdx) { 
 
    $scope.results = []; 
 
    $scope.results[firstIdx] = "populate results " 
 
     + firstIdx 
 
     + " with the number " 
 
     + secondIdx 
 
     + " - other two results should be empty" 
 
     ; 
 

 
    }; 
 
    
 
});

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

 
    <body ng-app="controllerAsDemo" ng-controller="MainController as main"> 
 

 
    <p>{{main.name}}!</p> 
 

 
    <!-- LOOP THROUGH A GALLERY THEME --> 
 
    <div class="title" ng-repeat="i in [1,2,3]"> 
 

 
     <p>This is section {{i}}</p> 
 

 
     <ul> 
 
      <li ng-repeat="j in [1,2,3]"> 
 
      <a href="" ng-click="displayContent(i, j)">section {{i}} - link {{j}}</a> 
 
      </li> 
 
     </ul> 
 

 
     <div class="results" ng-bind="results[i]"></div> 
 

 
    </div> 
 

 
</body>

這就是說，如果你想在角那麼你根本就使用jQuery。我會建議你閱讀有關角度Dom操縱here

另一種方法可以看到在this plunkr其中畫廊中的每個項目都有他的結果。

來源

2016-08-18 15:17:02 Alok

太棒了！我還沒有看到任何你提供的例子。它似乎正是我所需要的。非常感謝！！！ –

不客氣。請記住，Angular會爲你操控dom。如果你不得不操縱DOM來完成某些事情，那麼你可能會做錯某些事情。 – Alok

如何在AngularJS中按類索引div？

回答

相關問題