AngularJS Directives ng-click

AngularJS Directives ng-click - javascript

I must make a website. When you press an IMG it adds the template from the directive to another div.
In detail, I have 3 imgs on my website. Hamburger, Cola and Crips. When you press one of them it adds it to the Order List.
HTML code:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<script src="scripts/angular.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="Stylesheet" type="text/css" href="styles/style.css">
<title>Food Center</title>
<script src="scripts/skrypt.js"></script>
</head>
<body>
<h1 class="ladne"><center>Food Center</center></h1>
<div class="d1" ng-controller="myCtrl" myDir1>
<img src="styles/img/cola.gif"></img>
<img src="styles/img/fryt.gif"></img>
<img src="styles/img/ham.gif"></img>
<br>
<div class="zam" >
Date of order: {{data | date:'yyyy-MM-dd'}}
<br>
Your Order:
</div>
</div>
</body>
</html>
Controller code:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.data = new Date();
$scope.hamburger ={
name: 'Hambureger',
}
$scope.frytki = {
name: 'Frytki',
}
$scope.cola = {
name: 'Coca-Cola',
}
});
myApp.directive('dir1', function () {
return {
restrict: 'A',
template: '<br>{{hamburger.nazwa}}'
};
});
I really don't understand these directives. Would be nice if you can help me.

Related

AngularJS reference variables based on another variable

I want to be able to reference a variable in an Angular template that is built up on another variable with a filter.
So for example, I might have this in the controller:
$scope.EuropaLeague = true;
If I do this in the template it works as expected:
<div ng-if="EuropaLeague">
</div>
But what if I wanted to dynamically populate the ng-if with something coming from an ng-repeat e.g.
{{item.leagueName | myFilter}}
So the above would reference my scope variable $scope.EuropaLeague E.g. True or False?
Thanks

Here is working code:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.leagues =
[
{
"id": 1,
"name": "ChampionsLeague",
},
{
"id": 2,
"name": "EuropaLeague",
},
{
"id": 3,
"name": "FACup",
}
]
$scope.obj = {};
$scope.obj['EuropaLeague'] = false;
$scope.obj['FACup'] = false;
$scope.obj['ChampionsLeague'] = true;
});
<!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="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul ng-repeat="item in leagues" ng-if="item.name">
<li ng-if="obj[item.name]">{{item.name}}</li>
</ul>
</body>
</html>

Cant add second ng-controller

I am pretty new in angular/js development so now i stacked with this.
When I add ng-controller="HeaderController" to my HTML code it cant load Angular. If you remove this everything is fine. Why that happened? Thanks for any help and sorry for bad English :)
Code:
(function() {
var app = angular.module ('FunStuff',[]);
app.controller ('TextController',['$scope',function($scope){
$scope.stuff = [];
$scope.add = function(){
$scope.stuff.push ($scope.name);
}
}]);
app.controller ('HeaderController'['$scope',function($scope){
$scope.textClass = '';
$scope.changeClrClss = function(name){
$scope.ClrClss = name;
}
}]);
})();
<!DOCTYPE html>
<html ng-app ="FunStuff">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>LEARN JS</title>
<meta charset="utf-8">
</head>
<body >
<header ng-class = "ColorClass" ng-controller="HeaderController">
<h1>$~/Path_To_Js/</h1>
<button class="changeColorBtn" ng-click="changeColorClass('white')">
ChangeColorButton
</button>
</header>
<div class="wrapper" >
<article ng-controller = "TextController">
<p>There will be some information</p>
<form ng-submit="add()">
<input ng-model="name"><button>Add</button>
</form>
<ul class="buttons" ng-repeat= "n in stuff track by $index">
<li>{{n}}</li>
</ul>
</article>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

As your error says, You are missing , after the header controller,
app.controller ('HeaderController',['$scope',function($scope){
$scope.textClass = '';
$scope.changeClrClss = function(name){
$scope.ClrClss = name;
}
}]);
DEMO
var app = angular.module ('FunStuff',[]);
app.controller ('TextController',['$scope',function($scope){
$scope.stuff = [];
$scope.add = function(){
$scope.stuff.push ($scope.name);
}
}]);
app.controller ('HeaderController',['$scope',function($scope){
$scope.textClass = '';
$scope.changeClrClss = function(name){
$scope.ClrClss = name;
}
}]);
<!DOCTYPE html>
<html ng-app ="FunStuff">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>LEARN JS</title>
<meta charset="utf-8">
</head>
<body >
<header ng-class = "ColorClass" ng-controller="HeaderController">
<h1>$~/Path_To_Js/</h1>
<button class="changeColorBtn" ng-click="changeColorClass('white')">
ChangeColorButton
</button>
</header>
<div class="wrapper" >
<article ng-controller = "TextController">
<p>There will be some information</p>
<form ng-submit="add()">
<input ng-model="name"><button>Add</button>
</form>
<ul class="buttons" ng-repeat= "n in stuff track by $index">
<li>{{n}}</li>
</ul>
</article>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

(function() {
var app = angular.module ('FunStuff',[]);
app.controller ('TextController',['$scope',function($scope){
$scope.stuff = [];
$scope.add = function(){
$scope.stuff.push ($scope.name);
}
}]);
app.controller ('HeaderController',['$scope',function($scope){
//^^ missing comma here
$scope.textClass = '';
$scope.changeClrClss = function(name){
$scope.ClrClss = name;
}
}]);
})();

How to get the autocomplete in angular js?

I have a object which contains name and id.I just want to do the autocomplete based on name.I have tried the code as shown below
//Js file
var app=angular.module("myapp",[]);
app.controller("controller",['$scope',function($scope){
$scope.persons=[
{
Name:"Bhavani",
Id:67
},
{
Name:"Mamata",
Id:66
},
{
Name:"Prasanna",
Id:65
},
{
Name:"Ramya",
Id:64
},
{
Name:"Navya",
Id:63
}
];
$scope.complete=function(){
$("#autocomp").autocomplete({
source: $scope.persons.Id
});
};
}]);
//Html file
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Auto Complete based on name</title>
<script src="angularfiles/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="Jsfiles/autocomp.js"></script>
</head>
<body ng-controller="controller">
<div ng-repeat="p in persons">{{p.Name}}
</div>
<div class="ui-widget">
<input type="text" id="autocomp" ng-keyup="complete()">
</div>
</body>
</html>
The above code may have some errors .Its not getting output which i want to have .Can anyone help me out to solve this problem.

Try like this,
HTML:
<div ng-app = "myapp">
<div ng-controller="controller">
<div class="ui-widget">
<input type="text" id="autocomp" auto-complete>
</div>
</div>
</div>
Js:
var app = angular.module("myapp",[]);
app.controller("controller",function($scope){
$scope.availableTags = [
{
Name:"Bhavani",
Id:67
},
{
Name:"Mamata",
Id:66
},
{
Name:"Prasanna",
Id:65
},
{
Name:"Ramya",
Id:64
},
{
Name:"Navya",
Id:63
}
];
}).directive("autoComplete",function(){
return function(scope,element,attrs){
var names =$.map(scope.availableTags,function(value){ return value.Name;
});
element.autocomplete({
source: names
});
};
});
Working jsbin

This is how you should use any jQuery API's in an AngularJS project (i believe). Anytime you are doing DOM Manipulation or jQuery things, it should be placed inside the link: function() {} via directive.
Probably the main problem with your code was that the source: $scope.persons.Id is just a number. The source needs to be an array of Strings (at least as per the documentation). So I seperated all the names from your persons array and placed them in a new array peopleNames
<!doctype html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="vendors/angular.min.js"></script>
</head>
<body ng-controller="controller">
<div ng-repeat="p in persons">{{p.Name}}
</div>
<div class="ui-widget">
<input type="text" id="tags" autocomplete-directive>
</div>
<script>
var app = angular.module("myapp",[]);
app.controller("controller",['$scope',function($scope){
$scope.persons=[
{
Name:"Bhavani",
Id:67
},
{
Name:"Mamata",
Id:66
},
{
Name:"Prasanna",
Id:65
},
{
Name:"Ramya",
Id:64
},
{
Name:"Navya",
Id:63
}
];
// array of only strings autocomplete
$scope.peopleNames = [];
for(var i = 0, j = $scope.persons.length; i < j; i++) {
$scope.peopleNames.push($scope.persons[i].Name);
}
}]);
app.directive('autocompleteDirective', [function($scope) {
return {
link: function(scope, element, attrs) {
element.autocomplete({
source: scope.peopleNames
});
}
};
}]);
</script>
</body>
</html>

Thank For every one for suggesting me answer.I have also done in another way .It may help to others.
//html file
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Auto Complete based on name</title>
<script src="angularfiles/angular.js"></script>
<script src="angularfiles/angular-animate.js"></script>
<script src="angularfiles/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="angularfiles/bootstrap-theme.css"></script>
<script src="Jsfiles/autocomp.js"></script>
</head>
<body ng-controller="controller">
<div ng-repeat="p in persons">{{p}}</div>
<div class="ui-widget">
<input type="text" ng-model="selected" typeahead="p.Name for p in persons | filter:$viewValue">
</div>
</body>
</html>
//js file
var app = angular.module("myapp",['ui.bootstrap']);
app.controller("controller",['$scope',function($scope){
$scope.persons=[
{
Name:"Bhavani",
Id:67
},
{
Name:"Mamata",
Id:66
},
{
Name:"Prasanna",
Id:65
},
{
Name:"Ramya",
Id:64
},
{
Name:"Navya",
Id:63
}
];
}]);

pagination in angular js ui.bootstrap doesnt work for me

I add ui-bootstrap-tpls-0.12.0.js to my project and us accordion and now I wanna use pagination but i get this error
ngModelCtrl.$render is not a function
here is my code
<div ng-controller="paginationCtrl">
<pagination num-pages="noOfPages" current-page="currentPage" on-select-page="pageChanged(page)"></pagination>
</div>
i add ui.bootstrap
angular.module("boors", ['ui.router','ui.bootstrap','angularUtils.directives.uiBreadcrumbs','ngAnimate','truncate']);
and in my script tag i have
<script src="<?=$this->assetsBase?>/js/lib/ui-bootstrap-tpls-0.12.0.js"></script>
accordion works fine but pagination doesnt work

Take a closer look at the documentation for the pagination control.
http://angular-ui.github.io/bootstrap/#/pagination
I guess you're at least missing the ng-model attribute, otherwise your pagination doesn't know where to look for the current value. Guess thats what you meant with current-page.

Use version 10, Here is the sample of pagination
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<section class="main" ng-controller="contentCtrl">
<div ng-repeat="friend in friends">
{{friend.name}}
</div>
<pagination page="currentPage" total-items="totalItems" items-per-page="itemsPerPage" on-select-page="setPage(page)"></pagination>
<p>
total Items: {{totalItems}}<br />
Items per page: {{itemsPerPage}}<br />
Current Page: {{currentPage}}
</p>
</section>
</body>
</html>
JS
// Code goes here
angular.module('plunker', ['ui.bootstrap'])
.controller('contentCtrl', function ($scope) {
$scope.friends = [
{'name':'Jack'},
{'name':'Tim'},
{'name':'Stuart'},
{'name':'Richard'},
{'name':'Tom'},
{'name':'Frank'},
{'name':'Ted'},
{'name':'Michael'},
{'name':'Albert'},
{'name':'Tobby'},
{'name':'Mick'},
{'name':'Nicholas'},
{'name':'Jesse'},
{'name':'Lex'},
{'name':'Robbie'},
{'name':'Jake'},
{'name':'Levi'},
{'name':'Edward'},
{'name':'Neil'},
{'name':'Hugh'},
{'name':'Hugo'},
{'name':'Yanick'},
{'name':'Matt'},
{'name':'Andrew'},
{'name':'Charles'},
{'name':'Oliver'},
{'name':'Robin'},
{'name':'Harry'},
{'name':'James'},
{'name':'Kelvin'},
{'name':'David'},
{'name':'Paul'}
];
$scope.totalItems = 64;
$scope.itemsPerPage = 10
$scope.currentPage = 1;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;
});

How do I dynamically add an AngularJS directive to an element conditionally?

So I can't really get this to work, I've got the following code
HTML:
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
{{vt.t}}
<div my-directive="{{vt.t}}"></div>
{{vt.f}}
<div my-directive="{{vt.f}}"></div>
<hr />
{{vt.t}}
<div ng-class="{'my-directive': vt.t}"></div>
{{vt.f}}
<div ng-class="{'my-directive': vt.f}"></div>
<hr />
<div class="my-directive"></div>
<div class="nodirectiveclass"></div>
</body>
</html>
JavaScript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.vt = { t: true, f: false };
});
app.directive('myDirective', function($compile) {
return {
restrict: 'AC',
template: '<div>Directive on</div>',
replace: true
};
});
Plunker: http://plnkr.co/edit/7cJKhIuNqnsk1CkczjoE?p=preview
As you see the classes doesn't trigger the directive when added dynamically but works fine in my last "static" example. I also tried setting the directive attribute to true or false but that didn't seem to help.

I think you should use model variable in your directive. Then you can access what ever the value you want easily.
Refer this Answer:
AngularJS - Create a directive that uses ng-model

Develop Reference

JavaScript is the programming language of the Web.

AngularJS Directives ng-click - javascript

Related

AngularJS reference variables based on another variable

Cant add second ng-controller

How to get the autocomplete in angular js?

pagination in angular js ui.bootstrap doesnt work for me

How do I dynamically add an AngularJS directive to an element conditionally?

Categories

Resources