You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@zeppelin.apache.org by Rey <c....@neurocom.lu> on 2019/08/22 09:02:10 UTC
angular front end display system understanding
Hello everyone
I am new to Zeppelin and I am new to Angular.
I would like to use the angular interpreter in order to create a very
customized UI. I am always stuck when I tried to create a component
using Angular JS Material.
I tried to integrate such example :
https://material.angularjs.org/latest/demo/select#options-with-async-search
inside a paragraph. But I have only the text displayed. The selection
menu is never displayed.
This is my paragraph I am running (I tried to adapt the snippet of code
from angular js material website to a Zeppelin paragraph):
%angular
<div ng-controller="SelectAsyncController" layout="column"
layout-align="center center" style="padding:40px" ng-cloak=""
class="selectdemoOptionsWithAsyncSearch" ng-app="zeppelinWebApp">
<p>Select can call an arbitrary function on show. If this function
returns a promise, it will display a loading indicator while it is being
resolved:</p>
<div layout="column" layout-align="center center">
<md-select placeholder="Assign to user" ng-model="user"
md-on-open="loadUsers()" style="min-width: 200px;">
<md-option ng-value="user" ng-repeat="user in
users">{{user.name}}</md-option>
</md-select>
<p class="md-caption">You have assigned the task to: {{ user ?
user.name : 'No one yet' }}</p>
</div>
</div>
<script>
angular.module('zeppelinWebApp')
.controller('SelectAsyncController', function($timeout, $scope) {
$scope.user = null;
$scope.users = null;
$scope.loadUsers = function() {
// Use timeout to simulate a 650ms request.
return $timeout(function() {
$scope.users = $scope.users || [
{ id: 1, name: 'Scooby Doo' },
{ id: 2, name: 'Shaggy Rodgers' },
{ id: 3, name: 'Fred Jones' },
{ id: 4, name: 'Daphne Blake' },
{ id: 5, name: 'Velma Dinkley' }
];
}, 650);
};
});
</script>
Is it possible to use that angular js material library with a Zeppelin
angular paragraph ?
Do you know libraries that can be easily integrated with the Zeppelin
angular interpreter ?
Thank you very much for your help
C.Rey