How to implement Auto Complete Text Box in App Framework Using AngularJS,
Auto Complete Method gives error undefined
The following code throws an error when using AppFramework:
$scope.complete = function () {
console.log($scope.availableTags);
$("#tags").autocomplete({ source: $scope.availableTags });
};
Error autoComplete method is undefined
You can use ng-autocomplete. I have provided a simple example as follows:
<!DOCTYPE html>
<html ng-app="Test">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"href="style.css">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="script.js"></script>
<script src="ngAutocomplete.js"></script>
</head>
<body>
<div ng-controller="TestCtrl">
<form id="form" role="form">
<div class="form-group move-down">
<label for="Autocomplete">Generic Autocomplete</label>
<input type="text" id="Autocomplete" class="form-control" ng-autocomplete="result1" details="details1" options="options1"/>
</div>
</form>
</div>
</body>
</html>
You can also use Angucomplete. Find it here: http://ghiden.github.io/angucomplete-alt/
Related
I'm facing troubles when using md-input-container directive with the k-rebind event of Kendo UI. The issue ocurrs when I tried to rebind the min value for the end date (Second datepicker).
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css"/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.8.1/angular-translate.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="appController">
<input id="datepicker" kendo-date-picker k-ng-model="date" />
<md-input-container>
<label>End Date</label>
<input id="datepicker" kendo-date-picker k-min="date" k-rebind="date" />
</md-input-container>
</div>
<script>
angular
.module('app', ['kendo.directives', 'ngMaterial'])
.controller('appController', function (){});
</script>
</body>
</html>
I think the issue ocurrs because when Kendo performs the rebinding, it clones the input node; but I am not sure of that.
Have you ever faced this issue? Or How do you get working both (md-input-container and k-rebind) together?
I am playing with ng-input-tag and wanted to add bootstrap class to the input element of html so as to get its particular bootstrap class styles, but its not working as expected.
Below is the code:
angular
.module('myApp', ['ngTagsInput'])
.controller('myCtrl', function() {
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/readable/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css" rel="stylesheet" />
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label class="control-label" for="disabledInput">Disabled input</label>
<tags-input ng-model="tags" class="form-control"></tags-input>
</div>
</div>
So i hope you ran the code and found that i am unable to get bootstrap form-control class style for directive.
Here is Plunker link : https://plnkr.co/edit/jZlAsJ?p=info
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css" rel="stylesheet" />
<script>
angular
.module('myApp', ['ngTagsInput'])
.controller('myCtrl', function() {
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label class="control-label" for="disabledInput"> input</label>
<tags-input ng-model="tags"></tags-input>
</div>
</div>
</body>
</html>
See this plunker ... I've solved this for you ( you may need to modify the styling a bit).
https://plnkr.co/edit/sKxMOLWoDPtYNqE8hunS?p=preview
You need to add jquery in your code.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
Bootstrap js will need jquery to run. Please keep in mind that you have added jquery (above script) before bootstrap.js (watch my code carefully, review the sequel).
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title> Angular JavaScript! </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<div class="container">
<input class="form-control" ng-model="Firstname" />
{{Firstname}}
</div> <!-- container -->
</body>
</html>
my script.js
var app = angular.module('myApp'. []);
app.controller('myCtrl', function($scope){
$scope.Firstname = "guidy";
$scope.Lastname = "manson";
})
I've been trying to find a for solution for this for hours and I just can't find any.
My problem is that the data binding suddenly isn't working after I put ng-app="myApp" in my Html tag. However, when I put it this way: ng-app="", the data binding is already working. Can you guys figure out why angularjs data-binding is not working after I put or identify "myApp" in my ng-app?
var app = angular.module('myApp'. []);
This should have a comma and not a dot
var app = angular.module('myApp', []);
Also add ng-controller="myCtrl" to your view
you should add ng-controller directive to your view.
<body ng-controller="myCtrl">
<div class="container">
<input class="form-control" ng-model="Firstname" />
{{Firstname}}
</div> <!-- container -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
I'm trying to use Angular Agility for form validation. I'm trying to get a simple example working with the correct error messages and colours outlining the form element. So far I'm not getting very far. I've had a look at the demo examples but there's no clear code examples, unless I'm doing something drastically wrong.
Can anyone show me an example of how to use this properly?
For example how would I be able to get the following html to show the error message and the validation outline around the form element?
From the documentation?
<div ng-form="exampleForm" class="form-horizontal">
<input type="number" aa-field-group="person.age" min="0" max="140" required>
</div>
Thanks in advance.
Assuming you have the angular.js and angular-agility.js, here is a working sample
<!Doctype html>
<head>
<link href="https://raw.githubusercontent.com/AngularAgility/AngularAgility/master/simple_example/aa.formExtensionsOptional.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div ng-app="angularAgilitySimpleExample" ng-controller="indexCtrl">
<div ng-form="exampleForm">
<input type="number" aa-field-group="person.age" min="0" max="140" required>
</div>
</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-agility.js"></script>
<script type="text/javascript">
angular.module('angularAgilitySimpleExample', ['aa.formExtensions', 'aa.notify']);
</script>
</body>
</html>
Incase, you do not see the styling, please download the css from https://raw.githubusercontent.com/AngularAgility/AngularAgility/master/simple_example/aa.formExtensionsOptional.css and use it locally
You can find the complete example from angular-agility team https://raw.githubusercontent.com/AngularAgility/AngularAgility/master/simple_example/index.html
This plnkr shows how to validate the firstname, show the error message and show green/red outline round the form element:
http://plnkr.co/edit/V4vDiu?p=preview
<!DOCTYPE html>
<html ng-app="exampleModule">
<head>
<link rel="stylesheet" href="style.css" />
<script src="http://code.angularjs.org/1.2.8/angular.js"></script>
<script src="aa.formExtensions.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="exampleController" ng-form="exampleForm">
<div>
<input type="text" required="" ng-minlength="2" ng-maxlength="30"
aa-auto-field="firstName" />
</div>
<button aa-save-form="save()">Save</button>
</div>
</body>
</html>
I want in angularJS store oder preload the admin(id, password) by start from a json in localstorage, but angularJS return always error. the init function I have written through a ng-controller="initAdminController" in a div.
I want to know, where is the error exactly, in script.js or in index.html and how can i fix it.
skript.js:
var app = angular.module('store', []);
app.controller('initAdminController', function($userFactory){
admin.id=0;
admin.name="admin";
admin.password="admin";
userFactory.put(admin);
});
app.factory('userFactory', function(){
return{
get: function (userinfo) {
return JSON.parse(localStorage.getItem(userinfo) || '[]');
},
put: function(userinfo){
console('adminInit wird aufgerufen');
localStorage.setItem('user' + userinfo.id, JSON.stringify(userinfo));
}
};
});
and the index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular Project</title>
<link rel="stylesheet" href="css/vendor/jquery.mobile-1.4.3.css">
<link rel="stylesheet" href="css/vendor/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/vendor/mobile-angular-ui-base.css" />
<link rel="stylesheet" href="css/vendor/mobile-angular-ui-hover.css" />
<link rel="stylesheet" href="css/vendor/mobile-angular-ui-desktop.css" />
<script type="text/javascript" src="js/vendor/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="js/vendor/jquery.mobile-1.4.3.js"></script>
</head>
<body ng-app="store" >
<div id="pageContent" data-role="page" >
<div data-role="header" class="site-header" >
<h1>logIn</h1>
</div>
<p>Willkommen: <span>{{user.name}}</span> </p>
<div data-role="content" id="content">
<form method="get" role="form" name="Loginform">
<div data-role="fieldcontain">
<input type="text" name="userID" ng-model='user.name' required placeholder="user ID">
<input type="password" name="password" ng-model="user.password" required placeholder="password">
</div>
<input type="submit" ng-disabled="Loginform.$invalid" value="submit" ng-click:login() />
</form>
</div>
<div data-role="footer" id="footer" class="site-footer">
<h1>footer</h1>
</div>
</div>
<div ng-controller="initAdminController"></div>
<!-- load the libs -->
<script type="text/javascript" src="js/vendor/angular-resource.js"></script>
<script type="text/javascript" src="js/vendor/angular-route.js"></script>
<script type="text/javascript" src="js/vendor/angular-touch.js"></script>
<script type="text/javascript" src="js/vendor/angular-animate.js"></script>
<script type="text/javascript" src="js/vendor/angular-loader.js"></script>
<script type="text/javascript" src="js/vendor/angular.js"></script>
<script type="text/javascript" src="js/controllers/controller.js"></script>
<script type="text/javascript" src="js/directives/directive.js"></script>
<script type="text/javascript" src="js/filters/filter.js"></script>
<script type="text/javascript" src="js/services/service.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
and the error:
Error: [$injector:unpr] Unknown provider: $userFactoryProvider <- $userFactory ........
It's a small issue of you using "$userFactory" instead of using "userFactory" to inject.
I think you need to inject your userFactory into the controller:
app.controller('initAdminController', ['userFactory', function(userFactory){ ... }]);
Please note that $ sign is reserved for angularjs properties and such. The $$ is reserverd for private properties in angularjs that you should not use.