I am not familiar with angular js for doing demo about autocomplete on angular js; it getting error about autocomplete is not functiion; see below code:
<html>
<head>
<title>Autocomplete Demo</title>
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/autocomplete.css">
</head>
<body>
<header>
<h1><span class="thin">AngularJS:</span> - Demo</h1>
</header>
<div ng-app='MyModule'>
<div ng-controller='DefaultCtrl'>
<input type="text" ng-model="foo" auto-complete /> Foo = {{foo}}
</div>
</div>
<footer>
made by
</footer>
<script src="scripts/angular.min.js"></script>
<script type="text/javascript">
angular.module('MyModule', []).controller('DefaultCtrl', ['$scope', function($scope) {}])
.factory('autoCompleteDataService', [function() {
return {
getSource: function() {
return ['apples', 'oranges', 'bananas'];
}
}
}])
.directive('autoComplete', function(autoCompleteDataService) {
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
elem.autocomplete({
source: autoCompleteDataService.getSource(),
minLength: 2
});
}
};
});
</script>
I have tried my best and surfing on the google as well as stackoverflow but I didn't get the solution.
See error image autocomplete is not a function :
Related
var myApp = angular.module('myApp',['angular-virtual-keyboard']);
myApp.controller('MyCtrl',MyCtrl);
function MyCtrl($scope) {
document.getElementsByTagName('input')[0].focus();
}
<link href="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.js"></script>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<input type='text' ng-model="textValue" ng-virtual-keyboard/>
</div>
</body>
If I click on input then virtual keyboard is opening. But how can I open the keyboard without click. I tried using input.focus() that didn't work.
Just find a working fiddle Here with an directive auto focus
var myApp = angular.module('myApp',['angular-virtual-keyboard']);
myApp.controller('MyCtrl',function($scope) {
});
myApp.directive('autoFocus', function($timeout) {
return {
restrict: 'AC',
link: function(_scope, _element) {
$timeout(function(){
_element[0].focus();
}, 0);
}
};
});
<link href="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script src="https://rawgit.com/the-darc/angular-virtual-keyboard/master/release/angular-virtual-keyboard.js"></script>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<input type='text' ng-model="textValue" auto-focus ng-virtual-keyboard/>
</div>
</body>
You are doing change outside angularJS framework, so you need to apply it by $scope.$apply();
var myApp = angular.module('myApp',['angular-virtual-keyboard']);
myApp.controller('MyCtrl',MyCtrl);
function MyCtrl($scope) {
document.getElementsByTagName('input')[0].focus();
$scope.$apply();
}
I am trying to use this jQuery Plugin Date and Time Picker in my Angularjs project to receive date from a user in a form.
<html>
<head>
<title>Datetime picker</title>
<link href="bootstrap.min.css" rel="stylesheet" >
<link href="jquery.datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<input type="text" id="datetimepicker" class="form-control">
</form>
</div>
<script src="jquery-3.1.1.min.js" ></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.datetimepicker.full.js"></script>
</body>
<script type="text/javascript">
$('#datetimepicker').datetimepicker();
</script>
</html>
So, when I click on the form, the datetime widget appears quite alright. At this point I have not used any Angularjs.
Now I want to do this with Angularjs and this is the attempt I've so far made:
<html ng-app="myApp">
<head>
<title>Datetime picker</title>
<link href="bootstrap.min.css" rel="stylesheet" >
<link href="jquery.datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-view></div>
<script src="angular.min.js" ></script>
<script src="ngRoute.js" ></script>
<script src="app.js" ></script>
<script src="jquery-3.1.1.min.js" ></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.datetimepicker.full.js"></script>
</body>
<script type="text/javascript">
$('#datetimepicker').datetimepicker();
</script>
</html>
here is my app.js file:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/datetime', {
templateUrl: 'admin/date.html',
controller: 'DateTimeController'
})
.otherwise({
redirectTo: "/"
});
});
myApp.controller('DateTimeController', ["$scope", function($scope){
}]);
according to my routes, when I get /datetime in the url, the date.html partial is rendered; Here is the code for the date.html partial:
<div ng-controller="DateTimeController">
<input type="text" id="datetimepicker" class="form-control">
</div>
When I did this, I expected the date/time widget to appear but it didn't. So I began searching for solutions. The best solution I found suggested that I use angular directives. According to this solution, I made the following changes:
I created a custom directive date-time and here is the code in my app.js file:
// ...
myApp.directive('dateTime', function () {
return {
template:'<input type="text" id="datetimepicker" class="form-control">',
restrict: 'E',
link: function (scope, element, attr) {
$('#datetimepicker').datetimepicker();
}
};
});
and the date.html partial now looked like this:
<div ng-controller="DateTimeController">
<date-time></date-time>
</div>
At this point I was confident that it will work but it didn't.
What am I doing wrong? Is there a better way of doing this?
Thanks for any help.
Hard to say exactly what is wrong because there seem to be multiple iterations of your code here, and it's not clear how all of them have changed over time. Having said that, there's no reason that this shouldn't work-- it's working fine for me in this Plunker. You should be able to take a look and see what you're doing differently.
var app = angular.module('plunker', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/datetime', {
templateUrl: 'date.html',
controller: 'DateTimeController'
})
.otherwise({
redirectTo: "/"
});
});
app.directive('dateTime', function () {
return {
template:'<input type="text" id="datetimepicker" class="form-control">',
restrict: 'E',
link: function (scope, element, attr) {
$('#datetimepicker').datetimepicker();
}
};
});
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.controller('DateTimeController', function() {
});
I've been happily manipulating the view using $parsers and $formatters to transform data in forms. However, when I came to apply the same behaviour to other elements I found it didn't work, as demonstrated here:
angular.module("app", [])
.controller("foo", function ($scope) {
$scope.n = 1;
})
.directive("displayHalf", function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
ngModel.$parsers.push(function (value) {
return value*2;
});
ngModel.$formatters.push(function (value) {
return value/2;
});
}
};
});
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="foo">
<div>
Input: <input type="number" display-half ng-model="n">
</div>
<div>
Span: <span display-half ng-model="n">{{n}}</span>
</div>
<div>
Button: <button display-half ng-model="n">{{n}}</button>
</div>
<div>
Div: <div display-half ng-model"n">{{n}}</div>
</div>
</div>
</body>
</html>
I guess I expected a $formatter to be applied as data is displayed, even if it couldn't be edited. Was I mistaken? Any way to get this working without writing {{n / 2}} all over the place?
I'm not able to make the ng-bind="data1" capture the input ng-model="data1" from the widget. By clicking and choosing a date, ng-bind is not capturing the chosen date.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js"></script>
<script type="text/javascript">
var Module = angular.module('myapp', []);
myApp.directive('myapp', function datetimepicker() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.datetimepicker({
minView: 2,
autoclose: true,
language: 'pt',
format: 'dd/mm/yyyy',
showMeridian: true,
startView: 2
})
.find('input')
.addClass("form-control");
}
};
});
</script>
</head>
<body ng-app="myapp">
<div id="datetimepicker" class="input-append date" ng-model="data1">
<input ng-model="data1" type="text" datetimepicker></input>
<p ng-bind="data1">
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</body>
</html>
You should not give the same name myapp to your module and your directive.
Nowhere in your html you are using the directive.
Also, a <div> cannot have a ng-model directive, so this line is wrong:
<div id="datetimepicker" class="input-append date" ng-model="data1">
Your problem is that you need to initialize data1 in your controller:
function($scope) {
// Initialization
$scope.data1 = '';
}
I'm creating a my-validate directive that looks something like this
<input my-validate="customValidation" ng-model="model" />
What I want to do is to attach a sybling element to the directive like this
Error template:
<ul class"errors">
<li ng-repeat="for error in errors">{{error}} not valid</li>
</ul>
errors is defined in the scope of the directive.
I've added the error template in the compile function, but the problem I have is that the scope in the link function is not the same as the attached template.
Here is a plunker to illustrate the issue: http://plnkr.co/edit/ghdtdYruQaaO0Yxxlrt1?p=preview
'world' is seen in the directive template, but not on the added element :S.
That's because your div "2 hello" is outside the container where your scope is visible.
you can use element.append() instead of element.after() to have the scope available.
Directive
var app = angular.module('plunker', []);
app.directive('myValidate', function($compile) {
return {
template: '<span>1. Hello {{world}} my scope is {{$id}} (parent: {{$parent.$id}})<span/>',
replace: true,
restrict: 'A',
scope: true,
compile: function (element) {
element.append('<div>2. Hello {{ world }}, my scope is {{$id}} (parent: {{$parent.$id}})</div>');
return function(scope) {
scope.world = 'World';
//$compile()(scope);
};
}
};
});
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body>
<input my-validate="" />
</body>
</html>
http://plnkr.co/edit/dU3holBCePKe0ZAwQKh1?p=preview
I was reading and checking the example because I was in the same situation to display validation messages but under the input field and the message can change according to what kind of validation is required.
So I came up with this solution
var app = angular.module('app', []);
app.controller('ctrl', function($scope, CONSTANTS) {
$scope.title = "title";
$scope.CONSTANTS = CONSTANTS;
});
app.constant('CONSTANTS', {
LENGHT_1: 3,
LENGHT_2: 4
});
app.directive('dir', function($compile) {
return {
scope: true,
restrict: 'A',
require: '?ngModel',
link: function(scope, elem, attrs, ngModel) {
scope.maxLength = false;
scope.required = false;
scope.max = scope.$eval(attrs['ngMaxlength']);
var tpl = '<div ng-if="maxLength" ng-include="\'length.tpl.html\'"></div>' +
'<div ng-if="required" ng-include="\'required.tpl.html\'"></div>';
var el = $compile(tpl)(scope);
elem.after(el);
scope.$watch(attrs['ngModel'], function(newValue, oldValue, scope) {
if (ngModel.$error !== null && ngModel.$error.maxlength) {
scope.maxLength = true;
} else {
scope.maxLength = false;
}
if (ngModel.$error !== null && ngModel.$error.required && ngModel.$dirty) {
scope.required = true;
} else {
scope.required = false;
}
});
}
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script type="text/ng-template" id="length.tpl.html">
max length {{max}}
</script>
<script type="text/ng-template" id="required.tpl.html">
required
</script>
</head>
<body ng-controller="ctrl">
<h1>Input Validation</h1> {{title}}
<br><br>
<form name="form" novalidate>
<input dir name="input_one" ng-model="bar" ng-maxlength="CONSTANTS.LENGHT_1" required>
<br>
input one: {{form.input_one.$error}}
<br>
<br>
<input dir name="input_two" ng-model="foo" ng-maxlength="CONSTANTS.LENGHT_2">
</form>
<br>
input two: {{form.input_two.$error}}
</body>
</html>
On Plunkr
Hope it helps.
I think you're on the right track by using the form errors to toggle display. That's exactly how it's recommended in the standard Angular documentation.
If you'd like to show multiple errors for a single input, however, and possible even control the error messages from there, I'd recommend utilizing a service, such as implemented at http://plnkr.co/edit/iNcNs2ErrOnYf9I7whdu?p=preview.
Right now you can have one message per token, but as many tokens as you want per input. If you want multiple messages per token, just use an array of messages instead of single string value (note, unset does become more complicated with that method).
Hope that helps,
Alex