açısal js içinde ng tıklama ile dizi öğesi değeri nasıl atanır

Question

Programımda, üstbilgi adı ve işlev adından oluşan bir Array var. span etiketinden oluşan div numaralı telefondan ng-repeat kullanıyorum. Her yinelenen yayılma alanı için farklı işlevler eklemek istiyorum, böylece işlev adını dizide sakladım. benim html kodu:

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

benim açısal kodudur:

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

    }; 

ben() yakın atamak istediğiniz ng tıklayın ve ng-gösterisi için ArrowUp. Ben ng-click atamak ve ng-show

Answer 1

değişim nasıl:

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

için: i gördüğünüz gibi

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

DEMO = http://jsfiddle.net/Lvc0u55v/1788/

Answer 2

ng tıklama,

sorundur

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

ng-click ve ng-show için {{}} vermemize gerek yoktur.

umarım yardımcı olur.

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

bir görünümde bağlama onları:

Sen $eval yöntemi kullanmak gerekir

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

Önce diziye gerçek fonksiyonlarını geçmeleri gerekiyor here

$ kapsamı. $ eval t çalıştırır Mevcut kapsamdaki ifadesiyle sonucu döndürür. İfadedeki herhangi bir istisna yayılır (yakalanmamış).

<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: Açısal ifadeleri

HTML değerlendirirken yararlı olur

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

Burada yapmaya çalıştığımız ne here

Answer 4

, bu konuda daha fazla bilgi bulabilirsiniz