I've managed to load all my images from my json file into the application but i would only like 1 image to be loaded. I'm using ng-repeat which is why it keeps repeating itself. What do i replace ng-repeat with so it only shows the first image?
Here's my code.
Html:
<div ng-click="onClick()">
<i class="ion-images"></i>
</div>
<a ng-controller="Ctrl">
<ion-scroll direction="x">
<img on-hold="onHold()" ng-repeat="image in data" ng-src="{{image.image}}" />
</ion-scroll>
</a>
js:
.controller("Ctrl", function($scope, $http, $ionicModal) {
$scope.data = [];
$http.get('')
.success(function(data) {
$scope.data = data;
window.localStorage.setItem("images", JSON.stringify(data));
})
});
If you want display only first element from your array you don't have use ng-repeater, you can access it using array index ie:
ng-src="{{data.under9s[0].image}}
Please see working demo below:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.data = [];
$http.get('https://api.myjson.com/bins/4tutm')
.success(function(data) {
$scope.data = data;
window.localStorage.setItem("images", JSON.stringify(data));
})
.error(function(error) {
if (window.localStorage.getItem("images") !== undefined) {
$scope.data = JSON.parse(window.localStorage.getItem("images"));
}
});
});
<!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">
<p>Hello {{name}}!</p>
<ion-scroll direction="x">
<img on-hold="onHold()" ng-src="{{data.under9s[0].image}}" ng-click="showImages($index)" class="image-list-thumb" />
</ion-scroll>
</body>
</html>
Related
I have following AngularJS Script:
<div ng-app='app' ng-controller="myctrl">
<ul ng-repeat="module in data.data">
<li >{{module.name}}<br><span ng-click="module.changer = { 'on': 'off', 'off':'on'}[module.changer]; event.PreventDefault;">{{module.changer}} </span></li>
</ul></div>
Please also have a look to following Plunker:
https://plnkr.co/edit/a7aTK09lDJ3FlCHgdWIf?p=preview
When I click now on a items 'changer' (on or off), it will switch to the other value for the specific item.
But I want that the value is changing for all the items inside the ng-repeat, when I click on one of the item. How can I do that ?
Hi As i understood your problem, U can do that by defining a function which will set all values in json for changer field
<div ng-app='app' ng-controller="myctrl">
<ul ng-repeat="module in data.data">
<li >{{module.name}}<br><span ng-click="setValue()">
{{module.changer}} </span></li>
</ul>
</div>
And in controller ...
$scope.setValue=function(){
$scope.data.data.forEach(function(it){
it.changer=(it.changer=='off'? 'on':'off');
event.PreventDefault;
})
}
Try this , http://plnkr.co/edit/BFqR1PMsCKugIcLMGake?p=preview
HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app='app' ng-controller="myctrl">
<ul ng-repeat="module in data.data">
<li >{{module.name}}<br><span ng-click="changeValue()">{{module.changer}} </span></li>
</ul>
</div>
</body>
</html>
JAVASCRIPT
(function() {
'use strict';
angular
.module('app', [])
.controller('myctrl', myctrl);
function myctrl($scope, $http) {
$http.get("data.json")
.success(function(data) {
$scope.data = data;
})
.error(function(data, status) {
console.error('Repos error', status, data);
});
$scope.changeValue = function() {
//module.changer = { 'on': 'off', 'off':'on'}[module.changer]; event.PreventDefault;
for (var dat in $scope.data.data) {
$scope.data.data[dat].changer = ($scope.data.data[dat].changer == 'on') ? 'off' : 'on';
}
}
}
I am new to AngualrJS and I am having trouble getting a ng-click working inside a ng-repeat that sits inside a directive.
I use ng-repeat to display a list of PDFs and currently just trying to be able to click them to pop up an alert window. But I don't seem to be able to get any ng-click working within the directive.
The Angular code:
var app = angular.module("aria", []);
app.directive("rdnglist", function(){
return {
restrict: 'E',
templateUrl: "rdnglist.html",
controller: function(){
this.pdfs = pdflist;
this.test = function() {
$window.alert("hi");
};
},
controllerAs: "plist",
};
});`
The HTML:
<div class="fullsect">
<div class="pdflist" ng-repeat="pdf in plist.pdfs">
<h3>{{pdf.name}}</h3>
<img ng-src="{{pdf.image}}" ng-click="test()"/>
<p>Class: {{pdf.class}}</p>
<div id="commentNo">{{pdf.comments}}</div>
</div>
<div class="pdflist">
<h3>New File</h3>
<a ng-click="test()">Open</a>
<img src="/pictures/addnew.png"/>
</div>
I assume it has something to do with the scope of the controller but I'm unsure. As I'm new, I learned to use ControllerAs over $scope, is this the issue?
Here is a working plunker based on your code.
I changed the directive to inject $window ... see ['$window, function($window) to make the alert work. I also initialize with dummy data:
The app:
var app = angular.module('plunker', []);
app.directive("rdnglist", ['$window', function($window){
return {
restrict: 'E',
templateUrl: "rdnglist.html",
controller: function(){
this.pdfs = [{'name':'abc'}];
this.test = function() {
$window.alert("hi");
};
},
controllerAs: "plist",
};
}]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
And the rdnglist.htm... as you are using ControllerAs, you need plist.test(). To reduce my work I hardcoded an AngularJS image:
<div class="fullsect">
<div class="pdflist" ng-repeat="pdf in plist.pdfs">
<h3>{{pdf.name}}</h3>
<a ng-click="plist.test()"><img ng-src="http://code-maven.com/img/angularjs.png" /></a>
<p>Class: {{pdf.class}}</p>
<div id="commentNo">{{pdf.comments}}</div>
</div>
<div class="pdflist">
<h3>New File</h3>
<a ng-click="test()">Open</a>
<img src="/pictures/addnew.png"/>
</div>
</div>
index.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.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<rdnglist></rdnglist>
</body>
</html>
let us know if that helps.
With the code below, I see my button (angular 1.3.15, DevExtreme 15.1.4)
HTML :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Testing</title>
<link href="Content/dx.common.css" rel="stylesheet" />
<link href="Content/dx.light.css" rel="stylesheet" />
</head>
<body>
<script src="/Scripts/jquery-1.11.3.min.js"></script>
<script src="/Scripts/jquery.globalize/globalize.js"></script>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-sanitize.min.js"></script>
<script src="/Scripts/angular-ui-router.min.js"></script>
<script src="/Scripts/dx.webappjs.js"></script>
<script src="/app/app.js"></script>
<div ng-controller="myCtrl">
<div dx-button="{text: 'Test Button'}"></div>
</div>
</body>
</html>
app.js file :
var myApp = angular.module('myApp', ['dx']);
(function () {
angular.module('myApp')
.controller('myCtrl', ['$scope','dx', myCtrl]);
function myCtrl($scope, dx) {
var vm = this;
}
}());
I see the button and no error but when I add the controller in the div :
<div ng-controller="myCtrl">
<div dx-button="{text: 'Test Button'}"></div>
</div>
I get this error :
Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=dxProvider%20%3C-%20dx%20%3C-%20myCtrl
R/<#http://localhost:51314/Scripts/angular.min.js:6:417
You are attempting to inject the dx module into your myCtrl controller. Try removing it:
var myApp = angular.module('myApp', ['dx']);
(function () {
angular.module('myApp')
.controller('myCtrl', ['$scope', myCtrl]);
function myCtrl($scope) {
var vm = this;
}
}());
For future reference, following the link given in an Angular error can help reveal problems like these.
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');