Как ссылаться на divs по классу по индексу в AngularJS?

Я новичок в AngularJS. Это мой первый плункер.Как ссылаться на divs по классу по индексу в AngularJS?

Я пытаюсь сделать так, чтобы, если пользователь нажимает на ссылку в разделе, значение ссылки появляется в результатах. Остальные два результата должны быть очищены от их значений.

Я не могу найти документацию о том, как ссылаться на определенные элементы в классе по индексу. В 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

Awesome !!! Я не видел таких примеров, как тот, который вы предоставили. Кажется, он делает именно то, что мне нужно. Спасибо!!! –

Добро пожаловать. Просто помните, что Угловая делает манипуляции с домом для вас. Если вам нужно манипулировать DOM, чтобы что-то сделать, вы можете делать что-то неправильно. – Alok

Как ссылаться на divs по классу по индексу в AngularJS?

ответ

Смежные вопросы