Question

我想了解this JSON editor的代码并对其进行修改。

在directives.js中，有一段代码试图构建模板：

var switchTemplate = 
    '<span ng-switch on="getType(val)" >'
        ... ...
        + '<span ng-switch-when="Boolean" type="boolean">'
            + '<input type="checkbox" ng-model="val" ng-model-onblur ng-change="child[key] = val">'
        + '</span>'
        ... ...
    + '</span>';

// display either "plus button" or "key-value inputs"
var addItemTemplate = 
'<div ng-switch on="showAddKey" class="block" >'
    + '<span ng-switch-when="true">';
        if (scope.type == "object"){
           // input key
            addItemTemplate += '<input placeholder="Name" type="text" ui-keyup="{\'enter\':\'addItem(child)\'}" '
                + 'class="form-control input-sm addItemKeyInput" ng-model="$parent.keyName" /> ';
        }
        addItemTemplate += 
        // value type dropdown
        '<select ng-model="$parent.valueType" ng-options="option for option in valueTypes" class="form-control input-sm"'
            + 'ng-init="$parent.valueType=\''+stringName+'\'" ui-keydown="{\'enter\':\'addItem(child)\'}"></select>'
        // input value
        + '<span ng-show="$parent.valueType == \''+stringName+'\'"> : <input type="text" placeholder="Value" '
            + 'class="form-control input-sm addItemValueInput" ng-model="$parent.valueName" ui-keyup="{\'enter\':\'addItem(child)\'}"/></span> '
        + '<span ng-show="$parent.valueType == \''+numberName+'\'"> : <input type="text" placeholder="Value" '
            + 'class="form-control input-sm addItemValueInput" ng-model="$parent.valueName" ui-keyup="{\'enter\':\'addItem(child)\'}"/></span> '
        // Add button
        + '<button type="button" class="btn btn-primary btn-sm" ng-click="addItem(child)">Add</button> '
        + '<button type="button" class="btn btn-default btn-sm" ng-click="$parent.showAddKey=false">Cancel</button>'
    + '</span>'
    + '<span ng-switch-default>'
        // plus button
        + '<button type="button" class="addObjectItemBtn" ng-click="$parent.showAddKey = true"><i class="glyphicon glyphicon-plus"></i></button>'
    + '</span>'
+ '</div>';

我不明白的第一件事是ui-keyup="{\'enter\':\'addItem(child)\'}"的目的，因为ng-click="addItem(child)"按钮已经Add了。如果我删除它ui-keyup="{\'enter\':\'addItem(child)\'}"，似乎代码仍然有效。我不理解的第二件事是ng-change="child[key] = val"，key来自哪里？

实际上我想要实现的是添加handsontable类型以及现有类型，以便人们可以填写表并将其添加到JSON对象：

以下是我目前的整个项目：plnkr，所有与表相关的修改都在directives.js中。通过在addItemTemplate中添加以下代码，它确实显示了上表。但是我不知道如何完成剩下的工作，即在按下Add按钮后将实例添加到JSON对象。请注意，我们可以从hot-id this `+ '<span ng-show="$parent.valueType == \'' +tableName+'\'"> : <div ng-controller="MainCtrl as ctrl"><hot-table hot-id="mytable" datarows="ctrl.db.items" height="50" width="100"></hot-table></div>'`获取指向实际的实例的数据。

my_mahalanobis_distance

有没有人知道该怎么做其余的？原始代码很难理解（这是一个递归），我一直在努力解决这个问题（这就是我放100的原因）奖金）...

Answer 1

ui-keyup检测到按下键盘上的Enter键，而ng-click检测到鼠标点击事件。

开发人员使用两者，因此应用程序可以通过鼠标和键盘检测事件。这是编写可访问应用程序的最佳实践。有些残疾人无法使用鼠标，但他们可以使用键盘。此外，其他一些人更喜欢使用键盘来更快地做一些动作。

某些用户使用键盘而非鼠标在互联网上导航。专家“电源”用户更喜欢键盘命令以提高效率，而具有特定残疾的用户别无选择，只能使用键盘。例如，患有运动障碍的人难以使用鼠标所需的精细运动;盲人用户依赖辅助技术，如屏幕阅读器，无法看到鼠标点击的位置。

即使是最精彩或最精彩的网站对于无法访问其控件并与之交互的人来说也是完全无用的。键盘友好型网站使无法使用鼠标的用户可以进行这些交互。因此，检测点击和关键事件是一种很好的做法。

将表类型添加到JSON编辑器

1 个答案: