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>

我建议你使用基于对象而不是数组的nother数据结构。例如：

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

Answer 2

你需要调整一下你的JSON，你可以设置＆＃39;新文件夹＆＃39;作为对象键而不是数组。请参阅以下示例：

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

UI：

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

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

3 个答案: