ng-switchにhandontableを作成します

ng-switchの中にhandontableを使用したいと思います：handsontableを選択すると、通常の編集可能な手持ち式が表示されます。ng-switchにhandontableを作成します

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script> 
    <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.css"> 
</head> 
<body ng-app=""> 
    <select ng-model="myVar"> 
    <option value="dogs">Dogs 
    <option value="handsontable">handsontable 
    </select> 

    <div ng-switch="myVar"> 
    <div ng-switch-when="dogs"> 
    <p>Welcome to a world of dogs.</p> 
    </div> 
    <div ng-switch-when="handsontable"> 
     <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div> 
    </div> 
    </div> 
</body> 
</html>

ではJavaScript：this working exampleとは異なり

var example1 = document.getElementById('example1'); 
var settings1 = { data: [['A1', 'B1'], ['A2', 'B2']] }; 
var hot1 = new Handsontable(example1, settings1);

、テーブル内のセルは編集できません。だから、何かが欠落しているかどうか疑問に思っています。たとえば、実際の例では、テーブルの作成はdocument.addEventListener("DOMContentLoaded", function() { ... })でラップされていますが、この例ではjavacriptコードを何かで囲んでhandsontableに変更した後にテーブルを作成する必要がありますか？

出典

2017-01-05 Anonymous

[ 'ngHandsontable']（https://github.com/handsontable/ngHandsontable）に見てください。 – Mistalis

@Mistailisのように、ngHandsontableを使用できます。

JSBin

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <base href="http://handsontable.github.io/ngHandsontable/node_modules/"> 
    <link rel="stylesheet" href="handsontable/dist/handsontable.full.css"> 
    <script src="angular/angular.js"></script> 
    <script src="handsontable/dist/handsontable.full.js"></script> 
    <script src="../dist/ngHandsontable.js"></script> 
</head> 
<body ng-app="app"> 
    <select ng-model="myVar"> 
    <option value="dogs">Dogs 
    <option value="handsontable">handsontable 
    </select> 

    <div ng-switch="myVar"> 
    <div ng-switch-when="dogs"> 
    <p>Welcome to a world of dogs.</p> 
    </div> 
    <div ng-switch-when="handsontable"> 
     <div ng-controller="MainCtrl as ctrl"> 
     <hot-table datarows="ctrl.db.items"></hot-table> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

はJavaScript：

function dataFactory() { }; 
dataFactory.$inject = []; 
angular.module('ngHandsontable').service('dataFactory', dataFactory); 

function MainCtrl(dataFctory) { 
    this.db = { items: [[5, 6], [7, 8]] }; 
} 
MainCtrl.$inject = ['dataFactory']; 

angular 
    .module('app', ['ngHandsontable']) 
    .controller('MainCtrl', MainCtrl);

出典

2017-01-05 12:27:44

ng-switchにhandontableを作成します

答えて

関連する問題