I must do a website. On this website when you click on img it adds a text to the div.
It must has directives and controllers i dont have a clue how to do this...
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.angularjs.org/1.2.7/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>AngularJS System Zamówień</title>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.data = new Date();
$scope.hambureger ={
nazwa: 'Hambureger',
cena: '5',
}
$scope.crips = {
nazwa: 'Crips',
cena: '4',
}
$scope.cola = {
nazwa: 'Coca-Cola',
cena: '3',
}
$scope.show = function() {
}
}
myApp.directive1('myDir1', function () {
return {
restrict: 'A',
template: '<br>{{hamburger.nazwa}}'
};
});
myApp.directive2('myDir2', function () {
return {
restrict: 'A',
template: '<br>{{frytki.nazwa}}
};
});
myApp.directive3('myDir3', function () {
return {
restrict: 'A',
template: '<br>{{cola.nazwa}}'
};
});
});
</script>
</head>
<body>
<h1 class="ladne"><center>System zamówień żarcia</center></h1>
<div class="d1" ng-app="myApp" ng-controller="myCtrl">
<img src="styles/img/cola.gif" ng-click=""></img>
<img src="styles/img/fryt.gif" ng-click=""></img>
<img src="styles/img/ham.gif" ng-click=""></img>
<br>
<div class="zam">
Data Zamówienia: {{data |date:'yyyy-MM-dd'}}
<br>
Twoje zamówienie: //HERE ANGULAR MUST ADD A TEXT
</div>
</div>
</body>
</html>
It's really hard for me to do this...
So let's explain one more time:
When u click on img, text is added to div(class="zam"), when you press next img it adds new text in new line. Here are 3 diffrent imgs Crips, Hambureger 'n' cola
Related
I have a Kendo model instance (person for this example) and watching it is modified or not by using dirty property.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo + Angular</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="MainCtrl">
<div>Person name: {{ person.name }}</div>
<input type="text" name="name" ng-model="person.name"> <!-- This input don't work -->
<button ng-click="foo()">Foo</button> <!-- This button work because I call person.set method manually -->
<div>This person is modified? {{ person.dirty }}</div>
</div>
<script>
var Person = kendo.data.Model.define({
id: "personId", // the identifier of the model
fields: {
"name": {
type: "string"
},
"age": {
type: "number"
}
}
});
angular.module("app", ["kendo.directives"])
.controller("MainCtrl", function ($scope) {
$scope.person = new Person({
name: "John Doe",
age: 42
});
$scope.foo = function () {
$scope.person.set('name', "Kendo");
}
});
</script>
</body>
</html>
But when I type to text box dirty don't change because Angular ngModel doesn't fire Kendo "change" event. My real app have dozens of models like this, so is there any way to fix this automatically???
Thanks.
You can write a directive to replace for ng-model,
<input type="text" name="name" k-bind-model="person.name">
angular.module('app')
.directive("kBindModel", ["$parse", function ($parse) {
return {
restrict: "A",
scope: false,
link: function (scope, element, attributes, controller) {
var key = null;
var strs = attributes.kBindModel.split('.');
if (strs && strs.length > 1) {
key = strs[1];
}
var model = scope[strs[0]];
element.change(function () {
scope.$apply(function () {
model.set(key, element.val());
});
});
scope.$watch(attributes.kBindModel, function (n, o) {
element.val(n);
});
}
}
}]);
I'm taking a pool of random animals, displaying two, then when I click the button of one animal, I want that one to stay and the other to be swapped out for a new one. Right now, I can change the animal that I want to stay in view, but can't figure out how to "reach across" and change the other controller's view.
I've tried setting ng-click="left.findNewAnimal()" on the right side but I get no response on click.
I've also looked at using a service or factory, but I'm not sharing data between controllers, I want to change the data of one, from the other. How can this be accomplished?
JavaScript:
angular.module("root", [])
.controller("leftAnimal", ["$scope",
function($scope) {
var self = this;
var animal
$scope.findNewAnimal = function() {
var randNum = Math.floor(Math.random() * animalPool.length);
animal = animalPool[randNum];
animalPool.splice(randNum, 1)
changeAnimal();
};
$scope.findNewAnimal();
function changeAnimal() {
$scope.name = animal.name;
$scope.img = animal.img;
}
}
])
.controller("rightAnimal", ["$scope",
function($scope) {
var self = this;
var animal
$scope.findNewAnimal = function() {
var randNum = Math.floor(Math.random() * animalPool.length);
animal = animalPool[randNum];
animalPool.splice(randNum, 1)
changeAnimal();
};
$scope.findNewAnimal();
function changeAnimal() {
$scope.name = animal.name;
$scope.img = animal.img;
}
}
])
.factory();
var Animal = function(data) {
this.name = data.name
this.img = data.img;
this.baby = data.baby;
};
var animals = [{
name: "Baby Quetzal",
img: "http://i.imgur.com/CtnEDpM.jpg",
baby: true
}, {
name: "Baby Otter",
img: "http://i.imgur.com/1IShHRT.jpg",
baby: true
}, {
name: "Baby Octopus",
img: "http://i.imgur.com/kzarlKW.jpg",
baby: true
}];
var animalPool = [];
var init = function() {
animals.forEach(function(animalData) {
animalPool.push(new Animal(animalData));
});
}
init();
<!doctype html>
<html ng-app="root">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="row">
<div class="text-center">
<h2>Pick an Animal</h2>
</div>
<div ng-controller="leftAnimal" class="col-md-6">
<div class="animalImage">
<img class="img-center" ng-src="{{img}}">
</div>
<div class="animalName">{{name}}</div>
<div class="animalDescription">{{description}}</div>
<button type="button" ng-click="findNewAnimal()" class="btn btn-info img-center">{{name}}</button>
</div>
<div ng-controller="rightAnimal" class="col-md-6">
<div class="animalImage">
<img class="img-center" ng-src="{{img}}">
</div>
<div class="animalName">{{name}}</div>
<div class="animalDescription">{{description}}</div>
<button type="button" ng-click="leftAnimal.findNewAnimal()" class="btn btn-info img-center">{{name}}</button>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="js/ang.js"></script>
</html>
If you only want simple event exchange between controllers you can use
$scope.$emit and $scope.$on :
//right
<button type="button" ng-click="emitEvent()" class="btn btn-info img-center">{{name}}</button>
//right controller
$scope.emitEvent = function(){
$scope.$emit('changeAnimal');
}
//left controller
$scope.$on('changeAnimal', function(event){
//do stuff
})
More on $scope events in official docs
As you stated, you can use Service to communicate to between controllers.
If you want to update other controller update automatically, you want to watch it.
http://plnkr.co/edit/iLnlZDyR1cZUQIiJJJEp
(function () {
angular.module("root", [])
.controller("leftAnimal", ["$scope", "animalService",
function ($scope, animalService) {
var source = false;
$scope.findNewAnimal = function () {
var randNum = Math.floor(Math.random() * animalPool.length);
console.log("Left Click Index: " + randNum);
animalService.setAnimal(randNum);
source = true;
};
$scope.$watch(function () {
return animalService.getAnimal();
}, function (value) {
if(!source) {
$scope.animal = animalPool[value];
}
source = false;
});
}
])
.controller("rightAnimal", ["$scope", "animalService",
function ($scope, animalService) {
var source = false;
$scope.findNewAnimal = function () {
var randNum = Math.floor(Math.random() * animalPool.length);
console.log("Right Click Index: " + randNum);
animalService.setAnimal(randNum);
source = true;
};
$scope.$watch(function () {
return animalService.getAnimal();
}, function (value) {
if(!source) {
$scope.animal = animalPool[value];
}
source = false;
});
}
])
.factory("animalService", [function () {
var index = 0;
function getAnimal() {
return index;
}
function setAnimal(newIndex) {
index = newIndex;
}
return {
getAnimal: getAnimal,
setAnimal: setAnimal,
}
}]);
var animalPool = [{
name: "Baby Quetzal",
img: "http://i.imgur.com/CtnEDpM.jpg",
baby: true
}, {
name: "Baby Otter",
img: "http://i.imgur.com/1IShHRT.jpg",
baby: true
}, {
name: "Baby Octopus",
img: "http://i.imgur.com/kzarlKW.jpg",
baby: true
}];
})();
<!DOCTYPE html>
<html ng-app="root">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="row">
<div class="text-center">
<h2>Pick an Animal</h2>
</div>
<div ng-controller="leftAnimal" class="col-md-6">
<div class="animalImage">
<img class="img-center" ng-src="{{animal.img}}"/>
</div>
<div class="animalName">{{animal.name}}</div>
<div class="animalDescription">{{animal.description}}</div>
<button type="button" ng-click="findNewAnimal()"
class="btn btn-info img-center">
Change
</button>
</div>
<div ng-controller="rightAnimal" class="col-md-6">
<div class="animalImage">
<img class="img-center" ng-src="{{animal.img}}" />
</div>
<div class="animalName">{{animal.name}}</div>
<div class="animalDescription">{{animal.description}}</div>
<button type="button" ng-click="findNewAnimal()"
class="btn btn-info img-center">
Change
</button>
</div>
</div>
</body>
</html>
I want to do the following:
I have an array of all possible items 'all'.
I want to create a subset of that array in 'subset':
js.js:
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.all = [];
$scope.subset = [{name: 'n1', inUse: false}, {name: 'n2', inUse: false}, {name: 'n3', inUse: false} ];
// adding new item in all
$scope.addItem = function() {
var newc = {name: '?', inUse: false};
$scope.all.push(newc);
};
$scope.updateC = function(index) {
// index refers to all array
$scope.all[index].inUse = false;
$scope.all[index] = $scope.selectedItem;
$scope.all[index].inUse = true;
};
});
HTML.html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="angular-1.4.8.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body ng-controller="myController">
<button ng-click="addItem()">Add Item: </button>
<div ng-repeat="c in all">
{{c.name}}
<select ng-options="c as c.name for c in subset | filter: {inUse: false}"
ng-change="updateC($index)"
ng-model="selectedItem"></select>
</div>
</body>
</html>
But I'm getting 'TypeError: Cannot set property 'inUse' of undefined'. I see the inUse property in a child scope. Is that behaviour expected? How can I access the selected item in my scope?
I can do the following, but I don't believe it's correct:
var child = $scope.$$childHead;
for (var i = 0; i < index ; i++) {
child = child.$$nextSibling;
}
$scope.all[index] = child.selectedItem;
What is the correct way of doing what I want?
Charlie, you gave me the idea of changing the way I'm adding items to the subset:
JS
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.subset = [];
$scope.all = [{name: 'n1', inUse: false}, {name: 'n2', inUse: false}, {name: 'n3', inUse: false} ];
// adding new item in all
$scope.addItem = function() {
if ($scope.selectedItem != null) {
$scope.selectedItem.inUse = true;
$scope.subset.push($scope.selectedItem);
}
};
});
It's not the same I wanted to do, but it works.
HTML
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="angular-1.4.8.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body ng-controller="myController">
<select ng-options="c2 as c2.name for c2 in all | filter: {inUse: false}"
ng-model="selectedItem"></select>
<button ng-click="addItem()">Add Item: </button>
<div ng-repeat="c in subset">
{{c.name}}
</div>
</body>
</html>
I'm using angular-winjs to display a list. The HTML as well as the controller code is below. When I click the item, the selection is not set. As a result, the watch never gets called.
How can I get the selected item in the selection variable? My code looks similar to this issue, but have the problem still. I'm using the latest WinJS.
<div ng-app="myApp">
<div ng-controller="HomeTilesController">
<div>Selected count: {{selection.length}}, indexes: {{selection}}</div>
<win-list-view item-data-source="homeTiles" selection-mode="'single'" selection="selection">
<win-item-template>
<div class="tile">
<h5 class="win-h5">{{item.data.title}}</</h5>
</div>
</win-item-template>
<win-grid-layout></win-grid-layout>
</win-list-view>
</div>
</div>
HomeTilesController:
angular.module('myApp', ['winjs'])
.controller("HomeTilesController", ['$scope', function ($scope) {
$scope.homeTiles = [
{ title: 'Agents' },
{ title: 'Center' },
{ title: '' },
{ title: '' },
{ title: '' },
{ title: '' }];
$scope.selection = [1];
$scope.$watch('selection', function handleSelectionChange(newValue, oldValue) {
console.log('item selected');
})
}]);
The tiles are displayed correctly as below. You may notice that the Center tile (tile with the blue border) that has been selected as a result of setting the selection. But any other selection still shows the same value - selecting any other item wont set the selection.
The libraries are below:
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script src="~/lib/hammer.js/hammer.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="~/lib/angular/angular.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/css/ui-light.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/ui.js"></script>
<script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script>
<script src="~/app/my-app.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script src="~/js/site.js" asp-append-version="true"></script>
You have to use selection-mode="'single'" tap-behavior="'directSelect'"
var myApp = angular.module("myApp", ['winjs']);
myApp.controller("myCtrl", ['$scope', myCtrl]);
function myCtrl($scope) {
$scope.selection = [];
$scope.homeTiles = [{
title: 'A1'
}, {
title: 'A2'
}, {
title: 'A3'
}, {
title: 'A4'
}, {
title: 'A5'
}, {
title: 'A6'
}];
}
HTML
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div>Selected count: {{selection.length}}, indexes: {{selection.toString()}}</div>
<win-list-view item-data-source="homeTiles" selection="selection" selection-mode="'single'" tap-behavior="'directSelect'" class="listview win-selectionstylefilled">
<win-item-template>This list view item's rating is: {{item.data.rating}}</win-item-template>
<win-list-layout></win-list-layout>
</win-list-view>
</div>
</div>
Working code JSFiddle
WinJS ListView Interaction Examples ( Choose from dropdown )
I am using & (expression binding) operator in isolated scope of a directive but I am unable to trigger function on the parent controller . There should be output on the console but I am receiving none.
Here in the HTML part:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Directive &</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="isolate_scope_&.js"></script>
</head>
<body ng-app="isolate_scope">
<div ng-controller="isolateScopeController">
<b>Ctrl Data</b>
<div ng-repeat="person in persons">
<p>{{person.name}}</p>
</div>
<b>Directive Data</b>
<div ng-repeat="person in persons">
<friends frnd="person.name"></friends>
</div>
<my-button isolatedFunction="printScopeToFile()"></my-button>
</div>
</body>
</html>
Here goes the JS part :
angular.module('isolate_scope', [])
.controller('isolateScopeController', function($scope){
$scope.persons = [
{
name:"tanmay",
age:"28"
},
{
name: "James",
age:"28"
},
{
name:"Rylan",
age:"26"
},
{
name:"Aditya",
age:"23"
}
];
$scope.printScopeToFile = function(){
console.log("printng to file.....");
for(var i in $scope.persons){
console.log("Name = " + $scope.persons[i].name + " Age = " + $scope.persons[i].age);
}
};
})
.directive('friends',function(){
return {
restrict :'E',
template: '<input type="text" ng-model="name">',
scope :{
name:'=frnd'
}
};
})
.directive('myButton',function(){
return {
restrict: 'E',
template: '<button ng-click="isolatedFunction()">callParentfunction</button>',
scope : {
isolatedFunction:"&"
}
};
});
Fiddle for the same: http://jsfiddle.net/v51kob1q/
The attribute isolatedFunction in your <my-button isolatedFunction...> directive should need to be isolated-function, dash-delimited attributes