如何在angular js中为ng-click分配数组元素值

how to assign array element value to ng-click in angular js

本文关键字：ng-click 分配 数组元素 中为 js angular      更新时间：2023-10-21

在我的程序中，我有一个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点击，并将箭头向上分配给ng显示。如何将它们分配给ng-click和ng-show

更改：

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

ng点击是我看到的问题，

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

我们不需要给ng点击和ng显示｛｛｝｝。

希望能有所帮助。

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

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>

你需要使用$eval方法，你可以在这里阅读更多关于它的信息

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

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)
  };
}]);

请参阅此处的工作示例

相关文章：