In the following code, I am trying to pass the table cell (as a DOM object) to the function, but this doesn't mean the DOM object for the table cell, it appears that it refers to the $scope. Any idea how to do this?
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr >
<td ng-click="dum();">ONE</td>
<td>TWO</td>
</tr>
<tr ng-repeat="x in names">
<td ng-click="dum(this);">{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
obj1 = "haha";
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) {$scope.names = response.records;});
$scope.dum = function(x) { obj1 = x; console.log(x); }
});
</script>
</body>
</html>
In angular, you should always code against your data. Coding against the DOM is unnecessary in all but the most extreme edge cases, and when it is necessary, it's usually best done in a directive, where you can control how the rest of the angular app is updated.
In your case, you don't need to access the DOM, or the element, or even an event. You already have all the information you need in order to handle your code with the data.
<tr ng-repeat="x in names">
<td ng-click="dum(x);">{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
and in the controller:
$scope.dum = function(x) { console.log(x); }
You could, probably, do this:
In your HTML
<td ng-click="dum($event);">{{ x.Name }}</td>
In your Javascript
$scope.dum = function(e) { obj1 = e.target; console.log(x); }
//e.target will be the clicked element.
I would not recommend accessing the DOM from a controller, but you can use the $event.target. Here's a plunker example: http://plnkr.co/edit/wFdnPJVa7BHOcvkPqNNT?p=preview
angular.module('Test', [])
.controller('testCtrl', ['$scope', function($scope)
{
$scope.myFunc = function(e)
{
console.dir(e.target);
}
}]);
And the HTML
<body ng-app="Test">
<div ng-controller="testCtrl">
<button ng-click="myFunc($event)">Click Me</button>
</div>
</body>
Related
I am new to AngularJS and I am looking for advice on refreshing a module's table contents (which is a list of names and post codes in this case).
Here in script I reference the json file I want to refresh on a button press:
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http, $timeout) {
$http.get("jsondisplay4.php")
.then(function (response) {$scope.names = response.data;});
});
</script>
And here is the HTML:
<div ng-app="myApp" ng-controller="customersCtrl">
<button ng-click="doRefresh()">Refresh</button>
<table>
<tr>
<td>Ref</td>
<td>Company</td>
<td> </td>
</tr>
<tr ng-repeat="x in names">
<td>{{ x.Ref }}</td>
<td>{{ x.CompanyName }}</td>
<td>
<input type="text" name="textfield" id="textfield" ng-model="x.PostCode"></td>
</tr>
</table>
</div>
I currently have "doRefresh()" as the potential name, its just where to place the correct code and what it should be.
Any help is greatly appreciated.
app.controller('customersCtrl', function($scope, $http, $timeout) {
function run(){
$http.get("jsondisplay4.php")
.then(function (response) {
$scope.names = response.data;
});
}
$scope.doRefresh = function(){
run();
}
run();
});
When controller is loaded, it will call run method. $scope.doRefresh will do the same
This is for an assignment. Here table contains book details which contains book name, author, price, ISBN and category. When user click on book name it should redirect to order page displaying book name, author and price.
BookPage.html
<script type="text/javascript" src="book.js">
<body ng-app="mymodule" >
<div ng-controller="myController" >
<table border=2>
<thead>
<tr>
<th>ISBN</th>
<th>NAME</th>
<th>AUTHOR</th>
<th>CATEGORY</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="book in books">
<td>{{ book.ISBN }}</td>
<td >{{ book.Name }}</td>
<td>{{ book.Author }}</td>
<td>{{ book.Category }}</td>
<td>{{ book.price }}</td>
</tr>
</tbody>
</table>
**books.js**
var myapp = angular.module('mymodule', []);
myapp.controller("myController", function($scope, $http,$window) {
$http.get("https://api.myjson.com/bins/p4ujn").then(function(response) {
$scope.books = response.data;
$scope.getdetail=function(){
$scope.getbookdetail=this.book;
$window.location.href = "orderpage.html";
}
});
});
Page to be redirected when user click on book name.
orderpage.html
<script type="text/javascript" src="book.js"></script>
<body ng-app="mymodule" >
<div ng-controller="myController" >
{{getbookdetail.Name}}<br>
{{getbookdetail.Author}}
{{getbookdetail.price }}<br>
</div>
</body
This is my code. It display nothing, just a blank page.
You can use a Service or factory to share the data across the controllers.
DEMO
var app = angular.module("clientApp", [])
app.controller("TestCtrl",
function($scope,names) {
$scope.names =[];
$scope.save= function(){
names.add($scope.name);
}
$scope.getnames = function(){
$scope.names = names.get();
}
}
);
app.factory('names', function(){
var names = {};
names.list = [];
names.add = function(message){
names.list.push({message});
};
names.get = function(){
return names.list;
};
return names;
});
<!doctype html>
<html >
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="clientApp">
<div ng-controller="TestCtrl">
<input type="text" ng-model="name">
<button ng-click="save()" > save</button>
</div>
<div ng-init="getnames()" ng-controller="TestCtrl">
<div ng-repeat="name in names">
{{name}}
</div>
</div>
</body>
</html>
Apart from service/factory , you can go for other options like localStorage and rootScope, but those are not recommended ways.
You should use factory/Services, localStorage, routeParams or Child Parent controllers
I want to have a table with headers and data dynamically loaded from object of two arrays. Unfortunately, these rows aren't displayed.
http://jsfiddle.net/x7ur9u07/4/
<div ng-controller="MyCtrl">
<table>
<thead>
<tr>
<th>Input</th>
<th>Output</th>
<tr>
</thead>
<tbody>
<tr ng-repeat="inout in inoutContainer track by $index">
<td>{{ inout.input_vector[$index] }}</td>
<td>{{ inout.output_vector[$index] }}</td>
</tr>
<tr>
<td>
Foo
</td>
<td>
Bar
</td>
</tr>
</tbody>
</table>
</div>
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
window.alert('hello');
$scope.inoutContainer = {input_vector: ["0.0","0.0"], output_vector: ["0.0","0.0"]};
$scope.name = 'Superhero';
}
I managed to figure out a way to make it work -- you had a number of syntax errors that angularJS didn't understand
http://jsfiddle.net/x71jm9r8/
Basically I simplified the angularJS code
then added the ng-app directive to the container div
removed the track by $index part of the ng-repeat directive,
and finally added the myApp.controller() declaration.
I want to highlight the row of a table if this table contains an element that is in a global variable.
Here is a fiddle : http://jsfiddle.net/L60L3gv9/
So
var myVar = "SWITZERLAND"
is the global variable I'm looking in the table.
<table>
<th>Column1</th>
<th>Column2</th>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase }}</td>
</tr>
</table>
And if the table contains it, I want to highlight the row.
Any advices ?
Here is a possible solution:
HTML:
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<th>Column1</th>
<th>Column2</th> {{myVar}}
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td ng-class="{ 'red-background' : x.Country==myVar }">{{ x.Country | uppercase }}</td>
</tr>
</table>
CSS:
.red-background {
background-color: red;
}
JS:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.myVar = "Switzerland"
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function (response) {
$scope.names = response.data.records;
});
});
Note that the server returns countries in lowercase.
Here is a jsfiddle
First, define a class which highlight the row:
tr.highlight {
background-color:#123456;
}
Then you should define a constant and inject it into the controller:
var myVar = "SWITZERLAND" // highlight the row where SWITZERLAND is
var app = angular.module('myApp', []);
app
.constant('myVar', myVar)
.controller('customersCtrl', function($filter, $scope, $http, myVar) {
$scope.myVar = myVar;
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
$scope.names = response.data.records.map(function(item) {
item.Country = $filter('uppercase')(item.Country);
return item;
});
});
});
Last, use the directive ng-class in the view:
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<th>Column1</th>
<th>Column2</th>
<tr ng-repeat="x in names" ng-class="{'highlight' : x.Country === myVar}">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<tr>
<th>Sr. No.</th>
<th>Menu Name</th>
<th>Child Menu</th>
</tr>
<tr ng-repeat="menus in menuList" >
<td >{{$index+1}}</td>
<td >{{menus.menu}}</td>
<td ng-if="menus.menu_items"><span class="text-left logo-dashboard">
<a ui-sref="configureChildMenuState" title="Cilk me"><span class="glyphicon glyphicon-option-horizontal"></span></a>
</td>
<td ng-if="!menus.menu_items"></td>
</tr>
</tbody>
I have understand clearly u r question ,if any row have any any child data or rows need to highlight image or any one.
Here i used image by using boostrap
This is working perfectly check once
I am new to angular.js, I have a spring MVC application and I will like to switch from jstl to angular.js, I started this way
<table>
<c:forEach var="list" items="${list}">
<tr class="alt" ><td >${list.name}</td><td >${list.value}</td> </tr>
</c:forEach>
</table>
to
<table ng-app="" id="users">
<tr ng-repeat="x in list">
<td>{{ x.name }}</td>
<td>{{ x.value }}</td>
</tr>
</table>
If you really want to write the information directly in HTML you can add a tag with the required script.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
angular.module('AppNameHere', [])
.controller('exampleController', function() {
this.list = [{
name: 'Fool',
value: '12'
},
{
name: 'Bar',
value: '15'
}];
});
</script>
</head>
<body ng-app="AppNameHere">
<table id="users" ng-controller="exampleController as example">
<tr ng-repeat="x in example.list">
<td>{{ x.name }}</td>
<td>{{ x.value }}</td>
</tr>
</table>
</body>
</html>
But, as #Vaelyr said, AngularJS is commonly used to fetch data from server (using ajax or something similar) and show the results on the page:
// By default, you can use only 1 module per page.
angular.module('AppNameHere', [])
// service to load the data from server
.factory('exampleFactory', function($q){
var deferred = $q.defer();
// TODO: Load async...
var list =
[{
name: 'Fool',
value: '12'
},
{
name: 'Bar',
value: '15'
}];
deferred.resolve(list);
return deferred.promise;
})
// controller to show the data on the page
.controller('exampleController', function(exampleFactory) {
var controller = this;
controller.list = [];
// When the data is fetched from the server...
exampleFactory.then(function(list) {
// bind to the page
controller.list = list;
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="AppNameHere">
<table id="users" ng-controller="exampleController as example">
<tr ng-repeat="x in example.list">
<td>{{ x.name }}</td>
<td>{{ x.value }}</td>
</tr>
</table>
</body>
</html>