В моей программе у меня есть Array
который состоит из имени заголовка и имени функции. Я использую ng-repeat
в div
который состоит из тега span
. Я хочу добавить разные функциональные возможности для каждого итерационного диапазона, чтобы сохранить имя функции в массиве. мой 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 и стрелки для ng-show. Как я могу назначить их для 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>
Вам нужно использовать метод $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)
};
}]);
См. Рабочий пример здесь.
Сначала вам нужно передать реальные функции массиву:
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>
ng-click - проблема, как я вижу,
<div class="arrow-up" ng-show="header.arrowup" ng-click="header.close"></div>
нам не нужно указывать {{}} на ng-click и ng-show.
Надеюсь, поможет.