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

Posted 2023-05-09

【中文标题】如何在 ng-click 中调用 json 数组？

【英文标题】：How to call json array in ng-click?

【发布时间】：2017-09-29 19:25:07

【问题描述】：

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

这是格式

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

        ],

        ['Paste', function ($itemScope) 

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



        ]
    ];

我想要这样的东西，

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

调用上面的json。我是角度 js 的新手。请帮帮我。我不知道这是不是一个有效的问题。

【问题讨论】：

“调用JSON数组”是什么意思？

上面的 json 将在鼠标右键单击时调用，我希望在按钮单击时相同

@stark 您需要打印“新文件夹”、“复制”等，对吗？按钮点击

我想调用 $scope.menuOptions 来获取菜单列表

是的，我想打印

【参考方案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() 

【讨论】：

我可以直接打电话吗？

要直接从角度调用它，您需要将其添加到网站范围中

【参考方案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>

【讨论】：

不...只有一个按钮，当我点击时，我想在菜单栏中显示 arry

这种方式是通用的，您可以随心所欲地显示它。当你创建时使用我刚刚发布的编辑。

【参考方案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>

【讨论】：

我只想在按钮点击时触发