如何在 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');

在 Angular 中你喜欢这样：

<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，您可以将“新建文件夹”设置为对象键而不是数组。看下面的例子：

/* 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);
}

并在你的 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>

使用 NG-REPEAT 渲染按钮：

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

用户界面：

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

在按钮点击时触发 ng-repeat 之外的任何功能：

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