選択されたng-repeat要素でのみ呼び出す機能

現在、JSONを使用してデータを取得しようとしていて、ng-repeatを使用してウェブサイトで構造化しています。選択されたng-repeat要素でのみ呼び出す機能

問題は、ng-click時に、新しく作成されたすべての要素に対して、関数が各要素でも呼び出すことです。私もこのオペレータを使ってみましたが、それはangularjsで動作しないようです。

私は似たような問題を作りました。

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
</head> 
<body> 
    <div ng-controller="MyCtrl"> 
     <div ng-repeat="aplhabet in word"> 
      <button style="width:50px; margin: 5px" ng-click="addDiv()"> 
       <b>{{aplhabet}}</b> 
      </button> 
      <section ng-show="newdiv">functionInvoked</section> 
     </div> 
    </div> 

    <script> 
     var myApp = angular.module('myApp',[]); 
     function MyCtrl($scope){ 
      $scope.word = 'STRINGDEMO';  
      $scope.addDiv = function() { 
       $scope.newdiv = true; 
      } 
     } 
    </script> 
</body> 
</html>

ボタンをクリックするたびに、各要素の機能が実行されます。この関数内で識別子を渡す方法を理解するためには、関数がクリックされた要素に対してのみ呼び出されるように助けが必要です。

出典

2017-06-15 Ronit

あなたの 'addDiv'関数にパラメータとして' alphabet'を渡してください。また、関数では、特定のアクションを実行するかどうかに応じて値に基づいて評価することができます。 –

作業コードのplunkrまたはjsfiddleを追加してください！ –

ng-click = "addDiv（aplhabet"）でaddDivのパラメータとしてaplhabetを渡す –

これを達成するにはオブジェクト配列が必要です。単純にforループを使用してこれをオブジェクトの配列に変換します。

for(key in $scope.word){ 
    $scope.wordArr.push({ 
     letter : $scope.word[key], 
     newDiv : false 
    }) 
}

ng-repeatとして新しい配列を使用してください。印刷文字にパラメータとして、オブジェクト全体を渡すng-clickに<b>{{aplhabet.letter}}</b>

<div ng-repeat="aplhabet in wordArr"> 
    <button style="width:50px; margin: 5px" ng-click="addDiv(aplhabet)"> 
    <b>{{aplhabet.letter}}</b> 
    </button> 
    <section ng-show="aplhabet.newdiv">functionInvoked 
    </section> 
</div>

を使用して変更

var myApp = angular.module('myApp',[]); 
 
function MyCtrl($scope){ 
 
$scope.word = 'STRINGDEMO'; 
 
$scope.wordArr = []; 
 

 
for(key in $scope.word){ 
 
    $scope.wordArr.push({ 
 
     letter : $scope.word[key], 
 
     newDiv : false 
 
    }) 
 
} 
 
$scope.addDiv = function (aplhabet) { 
 
    aplhabet.newdiv = true; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
<div ng-repeat="aplhabet in wordArr"> 
 
<button style="width:50px; margin: 5px" ng-click="addDiv(aplhabet)"> 
 
<b>{{aplhabet.letter}}</b> 
 
</button> 
 
<section ng-show="aplhabet.newdiv">functionInvoked 
 
</section> 
 
</div> 
 
</div>

出典

2017-06-15 14:30:58

は、あなたが渡す必要が真

デモへnewDiv$index

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
</head> 
<body> 
    <div ng-controller="MyCtrl"> 
     <div ng-repeat="aplhabet in word track by $index"> 
      <button style="width:50px; margin: 5px" ng-click="addDiv($index)"> 
       <b>{{aplhabet}}</b> 
      </button> 
      <section ng-show="newdiv">functionInvoked</section> 
     </div> 
    </div> 

    <script> 
     var myApp = angular.module('myApp',[]); 
     function MyCtrl($scope){ 
      $scope.word = 'STRINGDEMO';  
      $scope.addDiv = function (index) { 
       //do your stuff here 
      } 
     } 
    </script> 
</body> 
</html>

出典

2017-06-20 12:19:52

選択されたng-repeat要素でのみ呼び出す機能

答えて

関連する問題