I am trying to populate input by typing the number in input[number].
Why this doesn't work
// Code goes here
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.lengInput = {
count: 0,
values: [],
fill: function(limit) {
var sequence = [];
for (var i = 0; i < limit; i++) {
sequence.push(i);
}
return sequence;
}
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js" data-semver="1.5.11"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input ng-model="lengInput.count" type="number" min="1" max="20">
<ul>
<li ng-repeat="i in lengInput.fillSequence(lengInput.count)">
<input ng-model="lengInput.values[i]" />
</li>
</ul>
</body>
</html>
since this is working
JSFiddle Demo
Please find my mistake.
Instead of attaching the function directly to the ng-repeat, you can use ng-init to intialize the $scope.lengInput.values and add an ng-change to the input field where $scope.lengInput.count is getting set, so that the function does not get run every time, instead it runs only when the value in the input box has changed!
// Code goes here
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.lengInput = {
count: 0,
values: [],
fill: function(limit) {
var sequence = [];
for (var i = 0; i < limit; i++) {
sequence.push(i);
}
$scope.lengInput.values = sequence;
}
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js" data-semver="1.5.11"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl" ng-init="lengInput.fill(lengInput.count)">
<p>Hello {{name}}!</p>
<input ng-model="lengInput.count" type="number" min="1" max="20" ng-change=" lengInput.fill(lengInput.count)">
<ul>
<li ng-repeat="i in lengInput.values">
<input ng-model="lengInput.values[i]" />
</li>
</ul>
</body>
</html>
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>
Given an input with ngModel, how can i get the viewValue inside ngChange function?
<input type="text" ng-model="getMyObject().value" ng-change="insert(1, 'my object property')" />
I have tried:
<input type="text" ng-model="getMyObject().value" ng-change="insert(1, getMyObject().value)" />
But return undefined.
Check this example and verify your code:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.list = [1, 5, 7];
$scope.myObj = {value: 10};
$scope.getMyObject = function() {
return $scope.myObj;
}
$scope.insert = function(pos, value) {
$scope.list.push(value);
}
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input type="text" ng-model="getMyObject().value" ng-change="insert(1, getMyObject().value)" />
<br>
<pre>myObj = {{myObj|json}}</pre>
<pre>list = {{list|json}}</pre>
</body>
</html>
The property name to which is bound your ng-model directive must be accessible: it has to be referred to an object in the scope.
Is there a way i can reset the value of kendo slider once it is changed.
Please see this example code: http://dojo.telerik.com/AKOhe/6
entire code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<input k-ng-model="width" kendo-slider />
</div>
<button k-ng-click="onClick()" />
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.width = 3;
$scope.onClick= function(){
$scope.width = 2;
};
})
</script>
</body>
</html>
How can i reset value of kendo slider on reset button?
Thanks in advance.
It is not working because you place the button outside of the controller scope, your code already correct. Try it like
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl" style="margin-bottom:20px;">
<input k-ng-model="width" kendo-slider="slider" />
<button ng-click="onClick()"> reset</button>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.width = 3;
$scope.onClick= function(){
$scope.width = 2;
};
})
</script>
</body>
</html>
This input value should be "Paris" but it does not display.
What is wrong with my code?
(function(angular, undefined) {
var mon_app = angular.module('mon_app', []);
angular.module('mon_app').controller('monctrl', function($scope) {})
}(window.angular));
<!DOCTYPE html>
<html class="app" ng-app="mon_app">
<head lang="fr" class="app">
</head>
<body>
<div ng-controller="monctrl">
This input value is "Paris"
<input name="lieu" ng-model="lieu" type="text" value="Paris" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
</body>
You cannot mix regular HTML (the value attribute of your input) and the angular-driven ng-model. The input will always display the value of what's in ng-model, here lieu, hence you should iniialize $scope.lieu with the Paris value.
(function(angular, undefined) {
var mon_app = angular.module('mon_app', []);
angular.module('mon_app').controller('monctrl', function($scope) {
$scope.lieu = "Paname";
})
}(window.angular));
<!DOCTYPE html>
<html class="app" ng-app="mon_app">
<head lang="fr" class="app">
</head>
<body>
<div ng-controller="monctrl">
This input value is "{{lieu}}"
<input name="lieu" ng-model="lieu" type="text"/>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
</body>
I am following YouTube's tutorial for Sharing Data between Controllers.
For some reason, the two inputs don't return shared data(not bind-able). Can anyone let me know what is wrong in my code?
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/css/app.css?2">
<script src="/bower-foundation/js/vendor/modernizr.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js?2"></script>
<!-- angularjs -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
return {msg:"I am data from a service"}
})
function firstctrl($scope, Data) {
$scope.data = Data;
}
function secondctrl($scope, Data) {
$scope.data = Data;
}
</script>
</head>
<body ng-app="myApp">
<div ng-controller="firstctrl">
<input type="text" ng-model="data.msg">
<h1>{{data.msg}}</h1>
</div>
<div ng-controller="secondctrl">
<input type="text" ng-model="data.msg">
<h1>{{data.msg}}</h1>
</div>
<!-- javascript -->
<script src="/bower-foundation/js/foundation.min.js?3"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.11/fastclick.min.js?2"></script>
<script src="/js/min/app.min.js?3"></script>
</body>
</html>
Its working fine, Take a look at this
Working Demo
HTML
<div ng-app='myApp'>
<div ng-controller="firstctrl">
<input type="text" ng-model="data.msg" />
<h1>{{data.msg}}</h1>
</div>
<div ng-controller="secondctrl">
<input type="text" ng-model="data.msg" />
<h1>{{data.msg}}</h1>
</div>
</div>
SCRIPT
var myApp = angular.module('myApp', []);
myApp.factory('Data', function () {
return {
msg: "I am data from a service"
};
})
function firstctrl($scope, Data) {
$scope.data = Data;
}
function secondctrl($scope, Data) {
$scope.data = Data;
}
Also take a look at this stuff
AngularJS - Sharing variables between controllers