2016-08-18 12 views
1

私はAngularJSが初めてです。これは私の最初のプランカです。divをAngularJSのインデックスでクラス別に参照する方法は?

ユーザーがセクション内のリンクをクリックすると、リンクの値が結果に表示されるようにしようとしています。他の2つの結果は、それらの値をクリアする必要があります。

インデックス内のクラス内の特定のアイテムを参照する方法に関するドキュメントは見つかりません。 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

答えて

1

です...のような何かをするだろう。角度リピートやその他のさまざまな指示は、あなたにそれを行う能力を与えます。

私はあなたのコードに少し触れて、それは今動作します。下記参照。あなたは角度でのjQueryを使いたいならば、あなたは、単にできる、と述べた

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>

。 私はあなたが角度DOM操作別のアプローチは、ギャラリー内の各アイテムは、彼の結果を持ってthis plunkrで見ることができhere

について読むことをお勧めします。

+0

恐ろしい!!!私はあなたが提供したもののような例は見ていません。それは私が必要とするものを正確に行うようです。本当にありがとう!!! –

+0

ようこそ。 Angularがあなたのためにdom操作をすることを覚えておいてください。あなたが何かをするためにDOMを操作する必要があるなら、あなたは何か間違っているかもしれません。 – Alok

関連する問題