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>
Related
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.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = [1,2,3,4];
$scope.results = {};
$scope.showButton = function () {
for (var key in $scope.results) {
if ($scope.results[key]) {
return true;
}
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!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.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input value="{{d}}" type="checkbox"/>
check this to check all checkbox and show the button
<br><br>
<li ng-repeat="d in data"><input ng-model="results[$index]" value="{{d}}" type="checkbox"/>{{$index}}</li>
<button ng-show="showButton()">Submit</button>
</body>
</html>
My code above bind each of the checkbox and show the save button if any of them got checked, but now I having problem implementing the main checkbox, which will check all of the checkbox and show the button.
http://plnkr.co/edit/goVQtYxjgo8fA15oSGuy?p=preview
Check working demo: Plunker.
Add a new checkbox:
<input type="checkbox" ng-change="toggleCheckAll()" ng-model="allChecked" />
check this to check all checkbox and show the button
Everytime you check/uncheck this chechbox, the function toggleCheckall will be invoked. In the controller:
$scope.allChecked = false;
$scope.toggleCheckAll = function () {
for (var key in $scope.results) {
$scope.results[key] = $scope.allChecked;
}
};
I'm trying to build an array with ng-model,
<div ng-repeat="n in [1, 2, 3]">
<input type="text" class="form-control" ng-model="headers[$index].key">
<input type="text" class="form-control" ng-model="headers[$index].value">
</div>
When I do angular.toJson ($scope.headers), I got:
{
"headers": {
"0": {
"key": "xxx",
"value": "yyy"
}
}
}
But I wanted this,
{
"headers": [
{
"key": "xxx",
"value": "yyy"
}
]
}
Is it impossible to get that?
Is this what you mean?
DEMO
index.js
<!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.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="object in transformedData">
<input type="text" class="form-control" ng-model="object.key">
<input type="text" class="form-control" ng-model="object.value">
</div>
<pre>{{transformedData}}</pre>
</body>
</html>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var data = {
"headers": {
"0": {
"key": "xxx",
"value": "yyy"
}
}
};
$scope.transformedData = transformData(data.headers)
function transformData(data){
var arr = [];
for(var key in data){
arr.push(data[key])
}
return arr;
}
});
You just need to initialize your header as an array and ng-model assignments will work.
I have altered the plunker shared by #Matt, check it here
http://plnkr.co/edit/z6Cz6R3gZpDCsXSUmIEG?p=preview
I have the following element:
{{ project.label }}
The idea of the ng-class is this: if the photo belongs to the project, the function belongsPhotoToProject returns true, so the selected-project class is set. Now, on click, after the function removeFromProject(project, $index, currentPhoto) is triggered, belongsPhotoToProject does not evaluate to true anymore, so I expect it to remove the class, however, this doesn't happen.
So my questions are: after the initial page load, on which page events does ng-click get triggered? If ng-click gets triggered only on page load, can I manually trigger it again on ng-click?
That should work as you described it. Here's a plnkr showing it:
http://plnkr.co/edit/V4R0EUwKK5TeH5wn7Y5N?p=preview
Are you getting any errors in your browser?
javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.project = {
hasPhotos: true,
label: "My Test Project"
};
$scope.removeFromProject = function(project, $index, currentPhoto) {
$scope.project.hasPhotos = false;
};
$scope.addToProject = function($index, currentPhoto) {
$scope.project.hasPhotos = true;
};
$scope.belongsPhotoToProject = function(project, $index, currentPhoto) {
return $scope.project.hasPhotos;
};
});
html:
<!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.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
{{ project.label }}
</body>
</html>
css:
.selected-project {
background-color: #ccf;
}
Let say I have a controller and many children DOMs with their own data attributes.
<!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.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p data-test-val='Brian'>Hello {{name}}!</p>
</body>
</html>
I want to access to the data-test-val like this
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $attrs) {
$scope.name = $attrs.testVal;
});
However, it does not seem to work as name is empty.
http://plnkr.co/edit/V1Leit8U7r2k4CZDGaGa?p=preview
How to access any data attribute in children DOM of the same scope?
Thanks.
you're messing up controllers with directives in terms of attribute acquiration.
directive:
.directive('directiveName', function() {
return {
link: function($scope, $elem, $attrs) {
// get $attrs stuff here
}
}
});
Create a separate directive named as "dataTestVal", then you can get an access to attributes of the tag.
Example Code:
<html ng-app="ExampleApp">
<head>
//required libraries, scripts
</head>
<body ng-controller="ExCtrl">
<div data-testval data="person"></div>
</body>
<script>
angular.module('ExampleApp',[]);
angular.module('ExampleApp")
.controller("ExCtrl",function($scope){
$scope.person = {
name:"afd",
age : 30
};
});
angular.module('ExampleApp")
.directive("dataTextval",function(){
return{
restrict:'A',
scope:{
data : '='
},
link:function(scope,element,attrs){
//you can gain access to element and its attributes
//scope.data is nothing but person details, which is declared in controller
}
}
});
</script>
</html>
Try this :
var ele = document.getElementsByTagName('p');
$scope.name = ele.getAttribuete('data-test-val');