how to use syncfusion splitter using angularjs

Question

I need to make following functionality using angularJS without using id for controls

here is HTML code::

<div id="outterSpliter">
    <div id="innerSpliter">
        <div>
            <div class="cont">Pane 1 </div>
        </div>
        <div>
            <div class="cont">Pane 2 </div>
        </div>
    </div>
    <div>
        <div class="cont">Pane 3 </div>
    </div>
</div>

here is script

     $("#outterSpliter").ejSplitter({
    height: 250, width: 401,
    orientation: ej.Orientation.Vertical,
    properties: [{}, { paneSize: 80 }]
});

   $("#innerSpliter").ejSplitter();

score 1 · Answer 1 · answered Jun 02 '15 at 14:21

To render the Splitter in Angular way, use the directive 'ej-splitter'. All JS component properties support one way biding. You need to add the prefix "e-" to the properties. Refer the below code to render the Splitter in Angular way.

<div ng-controller="SplitCtrl">
    <div ej-splitter e-height="250" e-width="401" e-orientation="vertical" e-properties="new">
        <div ej-splitter e-width="401">
            <div>
                <div class="cont">Pane 1 </div>
            </div>
            <div>
                <div class="cont">Pane 2 </div>
            </div>
        </div>
        <div>
            <div class="cont">Pane 3 </div>
        </div>
    </div>
</div>

As you can see in the above code snippet, for the 'e-properties', I have specified the value "new". The "e-properties" of splitter receives array of objects as value. So in the Script section I have assigned the values of Splitter pane properties to a scope variable and assigned it as value for e-properties.

Script code

<script>
    angular.module('splitApp', ['ejangular']).controller('SplitCtrl', function ($scope) {
        $scope.new = [{}, { paneSize: 80 }];
    });
</script> 

<style type="text/css" class="cssStyles">
    .cont {
        padding: 10px 0 0 10px;
    }
</style>

how to use syncfusion splitter using angularjs

1 Answers1