Javascript 仅对所选ng repeat元素调用函数_Javascript_Angularjs_Angularjs Ng Repeat_Angularjs Ng Click

Javascript 仅对所选ng repeat元素调用函数

javascript angularjs

Javascript 仅对所选ng repeat元素调用函数,javascript,angularjs,angularjs-ng-repeat,angularjs-ng-click,Javascript,Angularjs,Angularjs Ng Repeat,Angularjs Ng Click,目前，我正在尝试使用JSON获取一些数据，并使用ng repeat在我的网站上构建了这些数据问题在于，在单击任何新创建的元素时，函数也会对每个元素进行调用。我也尝试过使用this操作符，但它在angularjs上似乎不起作用我创造了一个类似于我的虚拟问题 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">&

目前，我正在尝试使用JSON获取一些数据，并使用ng repeat在我的网站上构建了这些数据

问题在于，在单击任何新创建的元素时，函数也会对每个元素进行调用。我也尝试过使用this操作符，但它在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>

正如您可能注意到的，每当您单击任何按钮时，函数都会为每个元素运行。我需要帮助来理解如何在此函数中传递任何标识符，以便只在单击的元素上调用该函数

您需要一个对象数组来实现这一点。只需使用for循环将其转换为对象数组

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

将新数组用作ng repeat。要打印字母，请使用{aplhabet.letter}

{{aplhabet.letter} 调用的函数您需要通过$index

将字母表作为参数传递给addDiv函数。在函数中，您可以根据值来评估是否执行某些操作。请添加一个plunkr或JSFIDLE工作代码！使用ng click=addDivaplhabet将aplhabet作为参数传递给addDiv

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

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