I have many objects that I want to combine, and then display only the ones which have a matching ID to another object.
So for instance; when a user clicks on John, it would display the fishing trips that john went on (there is are matching IDs in the User Info Object and the Fishing Trip Object).
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
</head>
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<h1>Select relevant information from a list</h1><br>
<table>
<tr>
<th>Name</th>
<th>ID</th>
</tr>
<tr ng-repeat = "x in userInfo">
<td>{{x.name}}</td>
<td>{{x.ID}}</td>
<td><button ng-click = "viewMore()">View More</button></td>
</tr>
</table><br><br>
<div ng-show = "showDiv">
<table><h3>Selected Information</h3>
<tr>
<th>Name (Selection)</th>
<th>Hobby (Selection)</th>
<th>ID (Selection)</th>
</tr>
<tr ng-repeat = "x in userInfo">
<td>{{x.name}}</td>
<td>{{x.hobby}}</td>
<td>{{x.ID}}</td>
</tr>
</table><br><br>
<div>
<h3>Fishing Trips for selected person:</h3>
{{fishingTrip1}} {{fishingTrip2}}
</div>
</div>
</div>
</body>
</html>
import angular from 'angular';
angular.module('plunker', []).controller('MainCtrl', function($scope) {
$scope.userInfo = [{"name":"John", "hobby":"fishing", "ID":"123"},
{"name":"Bob", "hobby":"Golf", "ID":"199"},
{"name":"Jerry", "hobby":"Football", "ID":"aAAa"}];
$scope.fishingTrip1 = [{"location":"Alaska", "fisherman":"John", "ID":"123"},
{"location":"Alaska", "fisherman":"Bob", "ID":"144"},
{"location":"Alaska", "fisherman":"Alex", "ID":"161"}];
$scope.fishingTrip2 = [{"location":"Colorado", "fisherman":"Sammy", "ID":"111"},
{"location":"Colorado", "fisherman":"John", "ID":"123"},
{"location":"Colorado", "fisherman":"Jerry", "ID":"aAAa"}];
$scope.selectedID = null;
$scope.viewMore = function(ID){
$scope.showDiv = true;
$scope.selectedID = ID;
};
});
https://plnkr.co/edit/M8X51cmtMmTNNf2S?open=lib%2Fscript.js&deferRun=1
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
</head>
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<h1>Select relevant information from a list</h1><br>
<table>
<tr>
<th>Name</th>
<th>ID</th>
</tr>
<tr ng-repeat = "x in userInfo">
<td>{{x.name}}</td>
<td>{{x.ID}}</td>
<td><button ng-click = "viewMore(x)">View More</button></td>
</tr>
</table><br><br>
<div ng-show = "showDiv">
<table><h3>Selected Information</h3>
<tr>
<th>Name (Selection)</th>
<th>Hobby (Selection)</th>
<th>ID (Selection)</th>
</tr>
<tr ng-repeat = "x in userInfo">
<td>{{x.name}}</td>
<td>{{x.hobby}}</td>
<td>{{x.ID}}</td>
</tr>
</table><br><br>
<div>
<h3>Fishing Trips for selected person:</h3>
<ul>
<li ng-repeat="trip in fishingTripsToShow">{{trip.location}}</li>
</div>
</div>
</div>
</body>
</html>
And in your js file
import angular from 'angular';
angular.module('plunker', []).controller('MainCtrl', function($scope) {
$scope.userInfo = [{"name":"John", "hobby":"fishing", "ID":"123"},
{"name":"Bob", "hobby":"Golf", "ID":"199"},
{"name":"Jerry", "hobby":"Football", "ID":"aAAa"}];
$scope.fishingTrip1 = [{"location":"Alaska", "fisherman":"John", "ID":"123"},
{"location":"Alaska", "fisherman":"Bob", "ID":"144"},
{"location":"Alaska", "fisherman":"Alex", "ID":"161"}];
$scope.fishingTrip2 = [{"location":"Colorado", "fisherman":"Sammy", "ID":"111"},
{"location":"Colorado", "fisherman":"John", "ID":"123"},
{"location":"Colorado", "fisherman":"Jerry", "ID":"aAAa"}];
$scope.fishingTripsToShow = [];
$scope.selectedFisherman = null;
$scope.viewMore = function(selectedFisherman){
$scope.showDiv = true;
$scope.selectedFisherman = selectedFisherman;
$scope.fishingTripsToShow = [];
$scope.fishingTrip1.forEach(function(f){
if(f.fisherman == $scope.selectedFisherman.name){
$scope.fishingTripsToShow.push(f);
}
});
$scope.fishingTrip2.forEach(function(f){
if(f.fisherman == $scope.selectedFisherman.name){
$scope.fishingTripsToShow.push(f);
}
});
console.log($scope.fishingTripsToShow);
};
});
Related
When I checked checkboxes one by one ,the count value should be increased and the same value should be showed in place of paragraph tag and same case should be happened while I unchecked too.
The above intend behavior is not happening.
Could any one please guide me to resolve this issue.
HTML file and controller.js
<html ng-app="controllers">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<h2>{{"Contact " + "list"}}</h2>
<p id="demo" align="center"></p>
<div ng-controller='userCtrl'>
<table align="center">
<tr>
<td>Status</td>
<td>Name</td>
<td>Number</td>
</tr>
<tr ng-repeat="x in contacts">
<td><input type="checkbox" id="name1" onchange="getElementById('demo').innerHTML=contactCount()"></td>
<td>{{x.name}}</td>
<td>{{x.number}}</td>
</tr>
</table>
</div>
<script>
var count = 0;
function contactCount()
{
var y=document.getElemenetById("name1").checked;
if(Number(y)== 1)
{
count+=1;
}
else
{
count;
}
return count;
}
</script>
</body>
</html>
**controller.js**
var controllers = angular.module('controllers', []);
controllers.controller('userCtrl', function($scope) {
$scope.contacts=[
{name:"Mr X",number:"1234"},
{name:"Mr Y",number:"4567"},
{name:"Mrs Z",number:"0214"},
{name:"Mr A",number:"9564"}
];
});
There is a spelling mistake in your code.
var y=document.getElemenetById("name1").checked;
should be like this
var y=document.getElementById("name1").checked;
you typed getElemenetById and it should be getElementById
var controllers = angular.module('controllers', []);
controllers.controller('userCtrl', function($scope) {
$scope.contacts=[
{name:"Mr X",number:"1234"},
{name:"Mr Y",number:"4567"},
{name:"Mrs Z",number:"0214"},
{name:"Mr A",number:"9564"}
];
});
<html ng-app="controllers">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<h2>{{"Contact " + "list"}}</h2>
<p id="demo" align="center"></p>
<div ng-controller='userCtrl'>
<table align="center">
<tr>
<td>Status</td>
<td>Name</td>
<td>Number</td>
</tr>
<tr ng-repeat="x in contacts">
<td><input type="checkbox" id="name1" onchange="getElementById('demo').innerHTML=contactCount()"></td>
<td>{{x.name}}</td>
<td>{{x.number}}</td>
</tr>
</table>
</div>
<script>
var count = 0;
function contactCount()
{
var y= document.getElementById("name1").checked;
if(Number(y)== 1)
{
count+=1;
}
else
{
count;
}
return count;
}
</script>
</body>
</html>
Anybody suggest me, where I went wrong?And also I need some explanation about the script I used for editing and removing because I just referred some materials and used that code without understanding.Can anyone explain this?
Code:
<table border="1">
<tr>
<td>ID</td>
<td>Name</td>
<td>Salary</td>
</tr>
<tr ng-repeat="faculty in facultymembers">
<td><span ng-hide="editmode">{{faculty.id}}</span><input
type="text" ng-show="editmode" ng-model="faculty.id"></td>
<td><span ng-hide="editmode">{{faculty.name}}</span><input
type="text" ng-show="editmode" ng-model="faculty.name"></td>
<td><span ng-hide="editmode">{{faculty.salary}}</span><input
type="text" ng-show="editmode" ng-model="faculty.salary"></td>
<td><button ng-hide="editmode"
ng-click="editmode=true;editfaculty(faculty)">EDIT</button>
<button ng-show="editmode" ng-click="editmode=false">DONE</button></td>
<td><button ng-click="removefaculty($index)">REMOVE</button></td>
</tr>
</table>
</div>
<script>
var app = angular.module("myapp", []);
app.controller("mycont", function($scope) {
$scope.facultymembers = [];
$scope.addfaculty = function(faculty) {
$scope.facultymembers.push(faculty);
$scope.faculty = {};
};
$scope.editfaculty = function(index) {
$scope.editing = $scope.facultymembers.Indexof(index)
};
$scope.removefaculty = function(index) {
console.log(index);
$scope.facultymembers.splice(index, 1);
}
});
</script>
</body>
</html>
I think you missed track by $index:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.facultymembers = [{
'id': 1,
'name': 'Test',
'salary': 2000
}];
$scope.addfaculty = function(faculty) {
$scope.facultymembers.push(faculty);
$scope.faculty = {};
};
$scope.editfaculty = function(index) {
$scope.editing = $scope.facultymembers.Indexof(index)
};
$scope.removefaculty = function(index) {
console.log(index);
$scope.facultymembers.splice(index, 1);
}
});
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1" class="table">
<tr>
<td>ID</td>
<td>Name</td>
<td>Salary</td>
</tr>
<tr ng-repeat="faculty in facultymembers track by $index">
<td><span ng-hide="editmode">{{faculty.id}}</span><input type="text" ng-show="editmode" ng-model="faculty.id"></td>
<td><span ng-hide="editmode">{{faculty.name}}</span><input type="text" ng-show="editmode" ng-model="faculty.name"></td>
<td><span ng-hide="editmode">{{faculty.salary}}</span><input type="text" ng-show="editmode" ng-model="faculty.salary"></td>
<td><button ng-hide="editmode" ng-click="editmode=true;editfaculty($index)">EDIT</button>
<button ng-show="editmode" ng-click="editmode=false">DONE</button></td>
<td><button ng-click="removefaculty($index)">REMOVE</button></td>
</tr>
</table>
</div>
I have such type of program.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"Amt" : "500",
},
{
"Amt" : "800",
},
{
"Amt" : "1580",
},
{
"Amt" : "1122",
}
]
$scope.value=function(d, x)
{
x.balance = x.Amt - d;
if(d > x.Amt){
$scope.isExceeded = true;
} else {
$scope.isExceeded = false;
}
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr>
<td>Amt</td>
<td>Balance</td>
<td>Entered Amt</td>
<td ng-if="error"> Error</td>
</tr>
<tr ng-repeat="x in records">
<td>{{x.Amt}}</td>
<td>{{x.balance}}</td>
<td><input type="text" ng-model="d" ng-change="value(d, x)"></td>
<td ng-if="d > x.Amt" ng-model="error">Please enter less than {{x.Amt}}</td>
</tr>
<tr>
<td colspan="4"><input type="button" value="Submit" ng-disabled="isExceeded"></td>
</tr>
</table>
</body>
</html>
What I want is submit button should become disable if any Entered Amt value exceeds the Amt value.
I m not getting an idea of how can I achieve this type of condition.I an new to angularjs.
You can have an variable isExceeded and use it in the angular markup with ng-disable directive to disable the button.
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr>
<td>Amt</td>
<td>Balance</td>
<td>Entered Amt</td>
<td ng-if="error"> Error</td>
</tr>
<tr ng-repeat="x in records">
<td>{{x.Amt}}</td>
<td>{{x.balance}}</td>
<td><input type="text" ng-model="d" ng-change="value(d, x)"></td>
<td ng-if="d > x.Amt" ng-model="error">Please enter less than {{x.Amt}}</td>
</tr>
<tr>
<td colspan="4" ng-disable="isExceeded"><input type="button" value="Submit"></td>
</tr>
</table>
</body>
and check it in the angular controller like
$scope.value=function(d, x)
{
if(d > x.Amt){
$scope.isExceeded = true;
} else {
x.balance = x.Amt - d;
$scope.isExceeded = false;
}
}
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'm new to Angularjs. I am learning about factory.
In my example, I have 2 requests to Restful Api and got 2 responses in JSON format.
With the first json, I can use ng-repeat to show them but the 2nd json can't bind to the view.
How can I bind both responses into the same view?
this is my code
index.html file
<!DOCTYPE html>
<html lang="en" ng-app='f1feed'>
<head>
<title>AngularJS Routing example</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 10px;
background-color: #F5F5F5;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="DriverController">
<table>
<thead>
<tr>
<th colspan="4">Drivers Champion Standings</th>
</tr>
<tr>
<th>No.</th>
<th>Full name</th>
<th>Driver ID</th>
<th>Points</th>
</tr>
</thead>
<tbody ng-repeat="driver in drivers">
<tr>
<td>{{$index + 1}} </td>
<td>{{driver.Driver.givenName}} {{driver.Driver.familyName}}</td>
<td>{{driver.Driver.driverId}}</td>
<td>{{driver.points}}</td>
</tr>
</tbody>
</table>
<div class="info">
<h1>1st Driver Detail info</h1>
<ul>
<li>Driver ID: {{alonso.driverId}} </li>
<li>Date of Birth: {{alonso.dateOfBirth}} </li>
<li>Nationality: {{alonso.nationality}}</li>
</ul>
</div>
</body>
</html>
file app.js
var app = angular.module('f1feed',[]);
app.factory('DriverSev', function($http){
var driverApi = {};
driverApi.getDriverStands = function(){
return $http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/current/driverStandings.json?callback=JSON_CALLBACK'
});
};
driverApi.getDetail = function(){
return $http({
method: 'JSONP',
url: 'http://ergast.com/api/f1/drivers/alonso.json?callback=JSON_CALLBACK'
});
};
return driverApi;
});
app.controller('DriverController', function DriverController($scope, DriverSev){
$scope.drivers = [];
$scope.alonso = [];
DriverSev.getDriverStands().success(function(data){
$scope.drivers = data.MRData.StandingsTable.StandingsLists[0].DriverStandings;
})
DriverSev.getDetail().success(function(data){
$scope.alonso = data.MRData.DriverTable.Drivers;
console.log($scope.alonso);
})
});
Thanks
your $scope.alonso is unused in your view put it in another ng-repeat to display it
<table>
<thead>
<tr>
<th colspan="4">Drivers Champion Standings</th>
</tr>
<tr>
<th>No.</th>
<th>Name</th>
</tr>
</thead>
<tbody ng-repeat="alon in alonso">
<tr>
<td>{{$index + 1}} </td>
<td>{{alon}}</td>
</tr>
</tbody>
</table>
if it's the same data model, push it in $scope.drivers
$scope.alonso is an array.
<ANY ng-repeat="details in alonso">
<any>Driver ID: {{details.driverId}} </any>
<any>Date of Birth: {{details.dateOfBirth}} </any>
<any>Nationality: {{details.nationality}}</any>
</ANY>
should do the trick, or something ugly such as {{alonso[0].driverId}}