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';
}
}
}
Related
Sorry if it is a dumb question, I am a beginner to web design and couldn't find an answer, even after a lot of googling / searching on here.
So as you can read in the title, my issue is, that upon clicking on "EX5" or "EX6" in my navbar, it glitches to the left side of the screen, instead of staying at the top.
Below is my code, since EX5 and EX6 are basically the same thing, I'll post the shorter one in here:
Navbar:
<!DOCTYPE html>
<html ng-app='sampleApp'>
<head>
<link data-require="bootstrap-css" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.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 data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular-route.js" data-semver="1.4.9"></script>
<script src="../js/script.js"></script>
<script src="../js/headerController.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default" ng-controller="HeaderController">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">JS</a>
</div>
<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}">EX1</li>
<li ng-class="{ active: isActive('/ex2')}">EX2</li>
<li ng-class="{ active: isActive('/ex3')}">EX3</li>
<li ng-class="{ active: isActive('/ex4')}">EX4</li>
<li ng-class="{ active: isActive('/ex5')}">EX5</li>
<li ng-class="{ active: isActive('/ex6')}">EX6</li>
<li ng-class="{ active: isActive('/ex7')}">EX7</li>
<li ng-class="{ active: isActive('/ex8')}">EX8</li>
<li ng-class="{ active: isActive('/ex9')}">EX9</li>
<li ng-class="{ active: isActive('/ex10')}">EX10</li>
</ul>
</div>
</nav>
</header>
<ng-view></ng-view>
</body>
</html>
EX6:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../styles/stylesheet.css">
<title>Exercise 6</title>
<script src="../js/script.js"></script>
</head>
<body>
<div>
<h2>Add an image, upon clicking, change the image</h2>
<hr>
<img onclick="changeImg()" id="sourceImg" src="../styles/images/diluc.jpg" alt="diluc">
</div>
</body>
</html>
script:
//change img
var currentImage = "../styles/images/diluc.jpg"
function changeImg(){
if(currentImage == "../styles/images/diluc.jpg"){
document.getElementById("sourceImg").src="../styles/images/venti.jpg";
currentImage = "../styles/images/venti.jpg"
}else{
document.getElementById("sourceImg").src = "../styles/images/diluc.jpg"
currentImage = "../styles/images/diluc.jpg"
}
}
/////Nav
(function () {
var app = angular.module('sampleApp',['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl:'../exercises/ex1.html'
})
.when('/ex2',{
templateUrl:'../exercises/ex2.html'
})
.when('/ex3',{
templateUrl:'../exercises/ex3.html'
})
.when('/ex4',{
templateUrl:'../exercises/ex4.html'
})
.when('/ex5',{
templateUrl:'../exercises/ex5.html'
})
.when('/ex6',{
templateUrl:'../exercises/ex6.html'
})
.when('/ex7',{
templateUrl:'../exercises/ex7.html'
})
.when('/ex8',{
templateUrl:'../exercises/ex8.html'
})
.when('/ex9',{
templateUrl:'../exercises/ex9.html'
})
.when('/ex10',{
templateUrl:'../exercises/ex10.html'
})
.otherwise({ redirectTo:'/'});
});
})();
My header controller:
(function () {
var headerController = function ($scope, $location)
{
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
};
angular.module('sampleApp').controller('HeaderController',headerController);
}());
And lastly my 3 lines of css:
#sourceImg{
width: 500px;
}
I would greatly appreciate your help, as I am unable to solve this myself. Thank you
Solved, issue was with my css file, there was some gibberish in there oof
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.
I started with AngularJS, but am unable to get the desired output. Here's the code.
index.html
<!doctype html>
<html ng-app>
<head>
<script src="scripts/angular.min.js"></script>
<script src="scripts/underscore-min.js"></script>
<script type="text/javascript" src="scripts/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{totalTodos}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
</body>
</html>
todo.js
function TodoCtrl($Scope) {
$Scope.totalTodos = 4;
$scope.todos = [
{ text: 'Learn AngularJS', done: false },
{ text: 'Build an appp', done: false }
];
}
You need to implement the module and controller code for angular(basic example link http://codepen.io/larryjoelane/pen/VeQbrW ). You could place the following code in your todo.js file. I have placed some comment in the code to show additional changes I made to your posted code to make it work.
In the following example you will notice that I place the ng-app attribute inside the oppening tag of a div. This is because I do not have access to the html tag in code pen. The way you are attempting to do it in your html code is correct. The only thing you are missing is the value.
Live Example: http://codepen.io/larryjoelane/pen/WrMZxg
Angular Controller Code:
angular.module("app", []).controller('TodoCtrl', ['$scope', function($scope) {
//changed from $Scope.totalTodos = 4 (syntax error $Scope would be undefined)
$scope.totalTodos = 4;
$scope.todos = [
{ text: 'Learn AngularJS', done: false },
{ text: 'Build an appp', done: false }
];
}]);
You will also need to add an app name to your ng-app attribute.
Example: <html ng-app="app">
Fully corrected HTML:
<!doctype html>
<html ng-app="app">
<head>
<script src="scripts/angular.min.js"></script>
<script src="scripts/underscore-min.js"></script>
<script type="text/javascript" src="scripts/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{totalTodos}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
</body>
</html>
Additional HTML example using ng-bind attribute:
<!--Example using ng-bind-->
<h1>Example using ng-bind<h1>
<h2>Total todos:<span ng-bind="totalTodos"></span></h2>
<ul class="unstyled">
<li ng-repeat="todo in todos" ng-bind="todo.text">
</li>
</ul>
Change this
$Scope
To this
$scope
Also you need
ng-app="app" which is your module name, i believe you haven't defined your module
Index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<script src="scripts/underscore-min.js"></script>
<script type="text/javascript" src="scripts/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{totalTodos}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
</body>
</html>
todo.js
angular.module("app", []).controller('TodoCtrl', ['$scope', function($scope) {
$scope.totalTodos = 4;
$scope.todos = [
{ text: 'Learn AngularJS', done: false },
{ text: 'Build an appp', done: false }
];
}]);
Further info you can get here
Using ng-app without a value
Your todo.js contains a casing issue in the second line replace '$Scope' with '$scope'. your code works once I corrected that and include module if you haven't declared already like i mentioned in below code
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<script src="scripts/angular.min.js"></script>
<script src="scripts/underscore-min.js"></script>
<script type="text/javascript" src="scripts/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{totalTodos}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
<script>
angular.module("exampleApp",[])
.controller("TodoCtrl",function($scope){
$scope.totalTodos = 4;
$scope.todos = [
{ text: 'Learn AngularJS', done: false },
{ text: 'Build an appp', done: false }
];
});
</script>
</body>
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>
I followed tutorial on this LINK to create AJAX requests on my angularJS appliction (CRUD operations). After I finished coding I tried to perform AJAX request (get all data from database) but when I lunch my application I got this error:
TypeError: undefined is not a function
at new <anonymous> (http://localhost:49510/Scripts/application/controllers.js:4:15)
Does someone knows where's the problem and how to fix it?
Here is code:
controller:
app.controller('ContactsController', [
'$scope', '$http', '$location', 'contactsService',
function ($scope, $location, $http, contactsService) {
$http.get('/contacts/').success(function (data) { //triggers error
alert(data);
$scope.contact = data;
$scope.loading = false;
})
.error(function () {
alert ("An Error has occured while loading contacts!");
// $scope.loading = false;
});
$scope.editContact = function (id) {
$location.path('/edit-contact/' + id);
};
$scope.displayContact = function (id) {
$location.path('/display-contact/' + id);
};
$scope.showDetails = function (id) {
var el = angular.element(document.getElementById('#ct-details-' + id));
el.toggleClass('details-hidden');
}
}
]);
and here is contacts.html template:
<div class="container view">
<header>
<h3>Contacts</h3>
</header>
<div>
<a class="nav-pills hover" href="#/add-contact">Add Contact</a>
</div>
<br /><br />
<div class="row">
<ul class="span5" >
<li class="nav-pills nav-stacked contact-row" data-ng-repeat="contact in contacts | orderBy:'firstName'">
<span id="ct-details-{{contact.id}}" data-ng-click="displayContact(contact.id)" style="cursor:pointer;" class="contact-data details-hidden" href="" >
<span class="span3 contact-name" >{{contact.firstName + ' ' + contact.lastName}}
{{contact.emailAddress}}</span>
</span>
<button class="btn editContact" data-ng-click="deleteContact(contact.id)">Delete</button>
<button class="btn editContact" data-ng-click="editContact(contact.id)">Edit</button>
</li>
</ul>
</div>
</div>
and here is index.cshtml file:
<!DOCTYPE html>
<html ng-app="contactsManager">
<head>
<title>Contacts</title>
</head>
<body>
<div class="navbar navbar-top">
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/custom.css" rel="stylesheet" />
<div class="navbar-inner">
<div class="container">
<h2>Contacts</h2>
</div>
</div>
</div>
<div ng-view class="example-animate-container"
ng-animate="{enter: 'example-enter', leave: 'example-leave'}"></div>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/application/application.js"></script>
<script src="~/Scripts/application/controllers.js"></script>
<script src="~/Scripts/application/contactsService.js"></script>
</body>
</html>
The order of arguments in the controller function has to match the order in the parameter array.
You have mixed the order of $http and $location.
So change your function signature to
app.controller('ContactsController', [
'$scope', '$http', '$location', 'contactsService',
function ($scope, $http, $location, contactsService) {