JSONエディタにテーブルタイプを追加

Question

this JSON editorのコードを理解してそれを変更したいと思います。我々はすでにng-click="addItem(child)"Addボタンの持っている与えられた、

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)\'}"の目的である：directives.jsで

は、テンプレートを構築しようとするコードの一部があります。 ui-keyup="{\'enter\':\'addItem(child)\'}"を削除しても、コードはまだ動作しているようです。 私が理解していない第二の事はng-change="child[key] = val"です。keyはどこから来たのですか？

実は私は人々が表に記入し、JSONオブジェクトに追加することができるように、既存のタイプと一緒にhandsontableタイプを追加して実現したいもの：

ここ

が全体であります私が現時点で持っているプロジェクト：plnkr、すべてのテーブル関連の変更はdirectives.jsです。 addItemTemplateに次のコードを追加すると、上記の表が表示されます。しかし、残りの作業、つまりAddボタンを押した後にJSONオブジェクトにインスタンスを追加する方法はわかりません。 thisのように、hot-idからhandontableインスタンスのデータを取得できることに注意してください。

`+ '<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>'` 

残りの部分は誰でも知っていますか？元のコードは、（それが再帰である）を理解するのは難しいですが、私は（私は100懸賞金を置く理由です）数日間、これで苦労してきたng-clickながら...

Answer 1

ui-keyupは、押し、キーボードのEnterキーを検出し、マウスクリックイベントを検出します。

開発者は、アプリケーションがマウスとキーボードの両方でイベントを検出できるように、両方を使用しました。これは、アクセス可能なアプリケーションを作成するためのベストプラクティスです。障害を持つ人々の中には、マウスで作業することはできませんが、キーボードで作業する人もいます。また、キーボードを使用していくつかのアクションをより速く行う方が好きな人もいます。

特定のユーザーは、マウスではなくキーボードを使用してインターネットをナビゲートします。エキスパートの「パワー」ユーザは、効率的にキーボードコマンドを好む一方、特定の障害を持つユーザはキーボードを使用するしかない。例えば、運動障害を有する人々は、マウスを使用するために必要とされる細かい運動の動きに困難を有する。視覚障害のあるユーザーはスクリーンリーダーなどの支援技術に頼っており、マウスをどこでクリックするかはわかりません。

ほとんどのファンシーですばらしいサイトでも、コントロールにアクセスできず、それと対話できない人にとっては、まったく役に立たないサイトです。キーボードに優しいウェブサイトでは、マウスを使用できないユーザーにとって、これらのやり取りが可能です。したがって、クリックイベントとキーアップイベントの両方を検出することをお勧めします。