I use kendo editor to show html file using below code but problem is that it show line when I use tabel in html. Please find below output image:
I just want to remove line from table.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/editor/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<textarea kendo-editor k-ng-model="html"></textarea>
<div class="box wide">
<textarea ng-bind-html="html" style="width: 100%; height: 5em"></textarea>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives", "ngSanitize" ])
.controller("MyCtrl", function($scope){
$scope.html = "<h1>Kendo Editor</h1>\n\n" +
"<p>Note that 'change' is triggered when the editor loses focus.\n" +
"<br /> That's when the Angular scope gets updated.</p>\n" +
"<table ><tr><td><strong>Test1 </strong></td></tr>" +
"<table ><tr><td><strong>Test2</strong></td></tr>" ;
})
</script>
</body>
</html>
You shouldn't use the table tag for each line.
Try this:
$scope.html = "<h1>Kendo Editor</h1>\n\n" +
"<p>Note that 'change' is triggered when the editor loses focus.\n" +
"<br /> That's when the Angular scope gets updated.</p>\n" +
"<table><tr><td><strong>Test1 </strong></td></tr>" +
"<tr><td><strong>Test2</strong></td></tr></table>" ;
Related
I'm using kendo-time-picker in my angular js project. The dropdown default is blank. But, when i open the dropdown it should show 8:00 AM as a first time. How can i achieve that.
Below is my code snippet.
<input class="form-control kendotimepicker" name="StartTimeVal" kendo-time-picker
ng-model="startTimeValModel"
ng-change="startTimeChange(startTimeValModel)"
ng-required=true
ng-pattern="/^(0?[1-9]|1[012])(:[0-5]\d) [AP][M]$/"
interval="5"
title="hh:mm AM/PM">
You can use the scrollTop() function, like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<input id="timepicker" />
<script>
$("#timepicker").kendoTimePicker({
open: function(e) {
if (!e.sender.value()) { // Run only if no value was selected
setTimeout(() => {
let containerElement = e.sender.timeView.list;
let listElement = containerElement.children().first();
containerElement.scrollTop(listElement.height() * 8 / 24)
}, 0);
}
}
});
</script>
</body>
</html>
You can use the k-value attribute and set the default value
DEMO
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.getType = function(x) {
return typeof x;
};
$scope.isDate = function(x) {
return x instanceof Date;
};
$scope.value = '08:00 AM';
})
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datetimepicker/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<h4>Select time:</h4>
<input kendo-time-picker="dtp"
k-value="'08:00 AM'"
ng-model="value"
style="width: 100%;" />
{{value}}
</div>
</div>
i have this peace of code in angularjs:
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-value="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
The Problem when i try to add ng-model in the input text, the value of ng-value disappeared, how i can fix this proble please ?
From the ngValue reference:
It can also be used to achieve one-way binding of a given expression
to an input element such as an input[text] or a textarea, when that
element does not use ngModel.
https://docs.angularjs.org/api/ng/directive/ngValue
This means you have to use either ngModel or ngValue, but not both. They conflict.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.benchmarGeographyObj = [{'BEN_BENCHMARK_GEOGRAPHY': 1},{'BEN_BENCHMARK_GEOGRAPHY': 2}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="//code.angularjs.org/1.3.1/angular.js" data-semver="1.3.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in benchmarGeographyObj">
<div style="padding-right: 60px;float:left;">
<input readonly style="width: 100%;" type="text" id="unik" ng-model="item.BEN_BENCHMARK_GEOGRAPHY" />
</div>
</div>
</body>
</html>
Here i created for simple form with validation, my requirement is i dont want html5 popup message but i need focus for particular valid field, how to do ?
Thanks for ur help in advanced .............................................
'use strict';
var app = angular.module('telstraApp', []);
app.directive('accessibleForm', function () {
return {
restrict: 'A',
link: function (scope, elem) {
// set up event handler on the form element
elem.on('submit', function () {
// find the first invalid element
var firstInvalid = elem[0].querySelector('.ng-invalid');
// if we find one, set focus
if (firstInvalid) {
firstInvalid.focus();
}
});
}
};
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TelsApp</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!--<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css">
<script data-require="angular.js#~1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-sanitize.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini" data-ng-app="telstraApp">
<div class="wrapper">
<div class="row" style=" position: relative; top: 0; height: 55px !important;z-index:9999;">
</div>
<!--<div id="header" ng-include="'layout/header/header.html'" ></div> -->
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar" style=" height: 100%; top: 10px; height:0px; padding-top: 60px;">
</aside>
<div class="content-wrapper" style=" margin-top: -29px; margin-bottom: 10px; height: 350px; overflow-y: auto; ">
<!-- Main content -->
<form>
<input type="text" ng-required="true">
<input type="text" ng-required="false">
<input type="text" ng-required="true">
<input type="submit">
</form>
<!-- /.content -->
</div>
</div>
<!-- /.content-wrapper -->
<!-- /.Footer -->
<!-- /.Footer -->
<script data-require="jquery#1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
<style>
.appBanner{
position:fixed; left:0; top: 0px; width: 1440px; border:2px; background-color:#6185BA;height: 46px;color: #000; font-family: 'Helvetica Neue', Arial, sans-serif;font-size: 12px;
}
</style>
In order to hide html5 validation messages, you have to specify novalidate on your form like this:
<form name='xyz' novalidate>
//your form
</form>
Read more about it here: disable html5 validations
You will have to specify autofocus on the input on which you want focus.
have a look at this fiddle where focus is on email input. focus with novolidate
I have created a directive with Username and ngMessage for validation. But ngMessage does not get displayed when validation occurs.
created a plunker. can anybody help me
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<style>
input.ng-invalid {
border: 1px solid red;
}
</style>
<script>
var module = angular.module('app', ['ngRoute', 'ngMessages']);
</script>
<script src="config.js"></script>
<script src="regdirective.js"></script>
</head>
<body>
<ng-view></ng-view>
</body>
</html>
http://plnkr.co/edit/JrKzLuh739gcqGFP71jn?p=preview
You did wrong in your embedded html. I changed your source code to:
template:'<div>User Name<input type="text" ng-model="reg.Username" name="Username" class="form-control" required ng-minlength="5" ng-maxlength="20" /></b></div>' +
'<br><div ng-messages="regForm.Username.$error" style="color:maroon" role="alert">' +
'<div ng-message="required">Enter User Name</div>' +
'<div ng-message="minlength">User name is too short</div>' +
'<div ng-message="maxlength">User Name is too long</div></div>',
And it worked here: http://plnkr.co/edit/onlfdhraHipjezcgIg7f?p=preview
I am blocked and can not be as follow, to see if someone could help me ... (sorry for my bad English and my explanation).
I have this pen where I have an input to insert a value or load default. NgStorage I use to store the value in memory if the app is reloaded and always load the user types in the input (localStorage).
After I have a dropdown where I choose one of the two numbers that charged me one of two templates that I have created (or template1 template2) in the following div.
Far right, but now I would like to save that result in any way for the next div (red border) perform a simple arithmetic operation as chosen above using a scope variable declared in the driver from the start.
Any help please?
Here my pen (I use ionic): http://codepen.io/maestromutenrroy/pen/ukwIC
<html ng-app="ionicApp"><head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic....</title>
<link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Hello!</h1>
</ion-header-bar>
<br /><br /><br />
<!-- load 11, but I change the valor -->
Write a number: <input type="number" ng-model="$storage.c6" style="border: 1px solid #ddd; padding-left: 10px">
<br>
<!-- select of two templates -->
Select one option:
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
<!-- print a template select -->
<div ng-include src="template.url" onload='myFunction()'></div>
<!-- template1.html -->
<script type="text/ng-template" id="template1.html">
{{1000 - $storage.c6}}
</script>
<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
{{10 - $storage.c6}}
</script>
<br>
<hr />
<div style="border: 2px solid red; padding: 20px">
Now, I would like a same operation (result of template1 or template2 - $storage.c12): .....
</div>
</body>
</html>
angular.module('ionicApp', ['ionic','ngStorage'])
.controller('MainCtrl', function($scope, $localStorage) {
$scope.$storage = $localStorage.$default({
c6: 1,
c12: 2
});
$scope.templates = [{
name: '5',
url: 'template1.html'}
,
{
name: '10',
url: 'template2.html'}];
$scope.template = $scope.templates[0];
})
Thank you!
You can save the results in a scope object and update it inside each template:
<!-- template1.html -->
<script type="text/ng-template" id="template1.html">
{{results.x = 1000 - $storage.c6}}
</script>
<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
{{results.x = 10 - $storage.c6}}
</script>
<div style="border: 2px solid red; padding: 20px">
Now, I would like a same operation (result of template1 or template2 - $storage.c12): ..... {{results.x - $storage.c12}}
</div>
And on the controller:
$scope.results = {};
Demo