如何在Angular JS中为ng-click分配数组元素值

Question

在我的程序中，我有一个由标头名称和函数名称组成的Array 。 我在由span标记组成的div使用ng-repeat 。 我想为每个迭代范围添加不同的功能，所以我将函数名称存储在数组中。 我的html代码是：

   <div ng-repeat="header in header" ng-init="head=header">
       <h4 class="headers">{{ header.name}}</h4>
       <div class="arrow-up" ng-show={{ header.arrowup}} ng-click={{header.close}}> </div>
   </div>

我的角度代码是：

   $scope.header=[{"name":"Subsection Header #1","arrowup":"arrowup","close":"close()"}];
    $scope.close = function() {
        console.log(hello);

    };

我想将close（）分配给ng-click，将arrowup分配给ng-show。 如何将它们分配给ng-click和ng-show

Answer 1

更改：

 <div class="arrow-up" ng-show={{ header.arrowup}} ng-click={{header.close}}>

至：

   <div class="arrow-up" ng-show="header.arrowup" ng-click="this[header.close]()">
         <button>
         CLOSE ME 
         </button>
       </div>

演示= http://jsfiddle.net/Lvc0u55v/1788/

Answer 2

ng-click是我所看到的问题，

<div class="arrow-up" ng-show="header.arrowup" ng-click="header.close"></div>

我们无需为ng-click和ng-show赋予{{}}。

希望能帮助到你。

Answer 3

首先，您需要将一个实函数传递给数组：

function arrowUp(){
 // ng-show needs to receive true or false
  return true;
}

function close(){
 // do something here
}
  $scope.headers=[{"name":"Subsection Header #1","arrowup":arrowUp,"close":close}];

将它们绑定在一个视图中：

 <div ng-repeat="header in headers">
       <h4 class="header">{{ header.name}}</h4>
       <div class="arrow-up" ng-show="header.arrowup()" ng-click="header.close()"> </div>
   </div>

Answer 4

您需要使用$eval方法，您可以在此处了解更多信息

$ scope。$ eval在当前作用域上执行表达式并返回结果。 表达式中的任何异常都会传播（未捕获）。 这在评估Angular表达式时很有用

HTML：

<div ng-controller="TestController">
  <div ng-repeat="header in headers">
    <h4>{{ header.name}}</h4>
    <button type="button" ng-click="onExecuteFunctionFromString(header.close)">Click Here</button>
  </div>
</div>

JS：

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

myApp.controller('TestController', ['$scope', function($scope) {
  $scope.headers = [{
    "name": "Subsection Header #1",
    "arrowup": "arrowup",
    "close": "close()"
  }];
  $scope.close = function() {
    console.log('hello');
  };
  $scope.onExecuteFunctionFromString = function(stringFunction) {
    $scope.$eval(stringFunction)
  };
}]);

请在这里查看工作示例