如何在ng-click中调用json数组？

Question

我想按钮点击调用json数组。我想列出按钮点击的详细信息。

这是格式

$scope.menuOptions = [ 
     ['New Folder', function ($itemScope) { 
     }], 
     null, 
     ['Copy', function ($itemScope) { 

     }], 

     ['Paste', function ($itemScope) { 

     }], 
     ['Delete', function ($itemScope) { 



     }] 
    ]; 

我想是这样的，

$scope.accc = function() { 
$scope.menuOptions(); 
} 

致电上述JSON。我是新来的角js。请帮助我。我不知道这是一个有效的问题。

Answer 1

试试这个：

$scope.callItem = function(itemName, arguments) { 
    for (let itemID in $scope.menuOptions) { 
     var item = $scope.menuOptions[itemID]; 
     if (!!item) { 
     if (item[0] == itemName) { 
       item[1].apply(this, arguments); 
      break; 
     } 
     } 
    } 
} 

$scope.callItem('Copy'); 

在角你是这样的：

<ul> 
    <li ng-repeat="item in menuOptions" ng-click="item[1]()"> 
     item[0] 
    </li> 
</ul> 

或者这样：

<ul> 
    <li ng-repeat="item in menuOptions" ng-click="callItem(item[0])"> 
     item[0] 
    </li> 
</ul> 

我会建议你使用基于诺特尔数据结构而不是数组。例如像这样：

$scope.menuOptions = { 
     'New Folder' : function() {}, 
     'Copy' : function() {} 
} 

Answer 2

你需要调整一下你的JSON，你可以将'New Folder'设置为对象键而不是数组。请看下面的例子：

/* Javascript: */ 
$scope.menuOptions = { 
    'New Folder': function ($itemScope) { 
     console.log('New Folder Created',$itemScope) 
    }, 
    'Copy': function ($itemScope) {}, 
    'Paste': function ($itemScope) {}, 
    'Delete': function ($itemScope) {} 
}; 

$scope.clickedMe = function(action_name,value){ 
    menuOptions[action_name](value); 
} 

，并使用NG-REPEAT渲染按钮使用它在你的HTML模板是这样的

/* HTML: */ 
<button ng-click="clickedMe('New Folder',myelement)">New Folder</button> 
<button ng-click="clickedMe('Copy',myelement)">Copy</button> 
<button ng-click="clickedMe('Paste',myelement)">Paste</button> 
<button ng-click="clickedMe('Delete',myelement)">Delete</button> 

：

<button ng-repeat="(key,value) in menuOptions" ng-click="clickedMe(key,other_elem_here)"> 
    {{key}} 
</button> 

Answer 3

菜单对象，如下排列：

$scope.menuOptions = [ 
      { 
       label:'New Folder', 
       action:function ($itemScope) { 
        alert('New Folder'); 
       }//End of function 
      }, 
      { 
       label:'Copy', 
       action:function ($itemScope) { 
        //function body 
        alert('Copy Copy'); 
       }//End of function 
      }, 
      { 
       label:'Paste', 
       action:function ($itemScope) { 
       //function body 
       alert('Paste'); 
       }//End of function 
      }, 
      { 
       label:'Delete', 
       action:function ($itemScope) { 
        //function body 
        alert('Delete'); 
       }//End of function 
      } 
     ]; 

UI：

<ul> 
    <li ng-repeat="item in menuOptions" ng-click="item.action()"> 
     {{item.label}} 
    </li> 
</ul> 

触发按钮单击任一功能了NG-重复：

//that will triger 'New folder' function 
<button ng-click="menuOptions[0].action">{{menuOptions[0].label}}</button>