Создайте handsontable в ng-переключателе

Я хотел бы использовать handsontable внутри ng-switch: когда мы выберем handsontable, он показывает нормальный и редактируемый разворотный.Создайте handsontable в ng-переключателе

JSBin

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:

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

В отличие от this working example, клетки в таблице не могут редактироваться. Поэтому мне интересно, нет ли чего-то. Например, в рабочем примере создание таблицы завершается document.addEventListener("DOMContentLoaded", function() { ... }), следует ли обернуть код javascript в этом примере тем, чтобы убедиться, что мы создаем таблицу только после того, как мы ng-switch на 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

Создайте handsontable в ng-переключателе

ответ

Смежные вопросы