I am displaying two json files data in two tables. I am able to console.log() the value of each row selected. I made a submit button, but I am not sure how to get those two values to submit it. Does someone could help me to understand how to do that ?
Below are my two tables
<div class="row">
<div class="col-md-8">
<h1>Choose your outbound</h1>
<table class="table">
<tr>
<th>Departure</th>
<th>Arrival</th>
<th>Economy class</th>
<th>Business class</th>
<th>First class</th>
<th></th>
</tr>
<tr ng-repeat="outbound in outbounds" ng-class="{active : isSelected(outbound)}" ng-click="setMaster(outbound)">
<td>{{ outbound.departure }}h</td>
<td>{{ outbound.arrival }}h</td>
<td>{{ outbound.ecoPrice }}</td>
<td>{{ outbound.businessPrice }}</td>
<td>{{ outbound.firstPrice }}</td>
<td>
<input type="radio" name="radioOutbound">
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h1>Choose your inbound</h1>
<table class="table">
<tr>
<th>Departure</th>
<th>Arrival</th>
<th>Economy class</th>
<th>Business class</th>
<th>First class</th>
<th></th>
</tr>
<tr ng-repeat="inbound in inbounds" ng-class="{active : isSelected(inbound)}" ng-click="setMaster(inbound)">
<td>{{ inbound.departure }}h</td>
<td>{{ inbound.arrival }}h</td>
<td>{{ inbound.ecoPrice }}</td>
<td>{{ inbound.businessPrice }}</td>
<td>{{ inbound.firstPrice }}</td>
<td>
<input type="radio" name="radioInbound">
</td>
</tr>
</table>
<button type="submit" ng-click="submit()">Submit</button>
</div>
</div>
Below is my AngularJS
// Inbound
$scope.isSelected = function(inbound) {
return $scope.selected === inbound;
}
$scope.setMaster = function(inbound) {
$scope.selected = inbound;
console.log($scope.selected);
}
// Outbound
$scope.isSelected = function(outbound) {
return $scope.selected === outbound;
}
$scope.setMaster = function(outbound) {
$scope.selected = outbound;
console.log($scope.selected);
}
// Submit
$scope.submit = function() {
console.log($scope.selected);
}
add ng-model to radio button
<td>
<input type="radio" name="radioOutbound" ng-model="radio_value1">
</td>
and for the second one also
<td>
<input type="radio" name="radioInbound" ng-model="radio_value2">
</td>
in the submit function you can pass the two values
<button type="submit" ng-click="submit(radio_value1, radio_value2)" >Submit</button>
in the controller
$scope.submit = function(val1, val2){
console.log(val1, val2);
}
if you dont want to pass values in the function then values will be in $scope.radio_value1 and $scope.radio_value2
I've created a plunker that I believe demonstrates your desired goal. My understanding from your code was:
You wanted either the radio button or the row clicked to select the item. The inbound and outbound items were each seperate sections, and only one radio in each should be selected.
All data should be returned back to the controller, once selected. This will send it all back in one objected, broken down by the model.
Within $scope.submit, you will find the selected option for inbound on formData.radioOutbound, and on formData.radioOutbound for the outbound item.
https://plnkr.co/edit/iwHi5NEDJSahG0JJ31ih?p=preview
JS
// Submit
$scope.submit = function(formData) {
console.log(formData);
}
$scope.formData = {
radioOutbound: '',
radioInbound: ''
};
$scope.outbounds = [
{
departure: 'today',
arrival: 'tomorrow',
ecoPrice: 100,
businessPrice: 200,
firstPrice: 300
},
{
departure: 'tomorrow',
arrival: 'next day',
ecoPrice: 100,
businessPrice: 200,
firstPrice: 300
}
]
$scope.inbounds = [
{
departure: 'today',
arrival: 'tomorrow',
ecoPrice: 100,
businessPrice: 200,
firstPrice: 300
},
{
departure: 'tomorrow',
arrival: 'next day',
ecoPrice: 100,
businessPrice: 200,
firstPrice: 300
}
]
HTML
<div class="row" >
<div class="col-md-8">
<h1>Choose your outbound</h1>
<table class="table">
<tr>
<th>Departure</th>
<th>Arrival</th>
<th>Economy class</th>
<th>Business class</th>
<th>First class</th>
<th></th>
</tr>
<tr ng-repeat="outbound in outbounds"
ng-class="{'success' : formData.radioOutbound == this.outbound}"
ng-click="formData.radioOutbound = this.outbound">
<td>{{ outbound.departure }}h</td>
<td>{{ outbound.arrival }}</td>
<td>{{ outbound.ecoPrice }}</td>
<td>{{ outbound.businessPrice }}</td>
<td>{{ outbound.firstPrice }}</td>
<td>
<input type="radio" ng-value="outbound" ng-model="formData.radioOutbound">
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h1>Choose your inbound</h1>
<table class="table">
<tr>
<th>Departure</th>
<th>Arrival</th>
<th>Economy class</th>
<th>Business class</th>
<th>First class</th>
<th></th>
</tr>
<tr ng-repeat="inbound in inbounds"
ng-class="{'success' : formData.radioInbound == this.inbound}"
ng-click="formData.radioInbound = this.inbound">
<td>{{ inbound.departure }}h</td>
<td>{{ inbound.arrival }}h</td>
<td>{{ inbound.ecoPrice }}</td>
<td>{{ inbound.businessPrice }}</td>
<td>{{ inbound.firstPrice }}</td>
<td>
<input type="radio" ng-value="inbound" ng-model="formData.radioInbound">
</td>
</tr>
</table>
<button type="submit" ng-click="submit(formData)">Submit</button>
</div>
</div>
Related
I have 2 lists (persons and animals) that I'm displaying with ng-repeat. I want to show these two lists in one table with a heading.
Here is an example how I want to show the data.
I already tried it with ng-show="$first", but that is not the result I want to achieve.
<thead>
<tr>
<th>ID</th>
<th>BIRTHDAY</th>
<th>NAME</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ps in $ctrl.persons" ng-if="$ctrl.valuePersons == true">
<th ng-show="$first">PERSONS</th>
<td>{{ ps.id }}</td>
<td>{{ ps.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ ps.name }}</td>
</tr>
<tr ng-repeat="an in $ctrl.animals" ng-if="$ctrl.valueAnimals == true">
<th ng-show="$first">ANIMALS</th>
<td>{{ an.id }}</td>
<td>{{ an.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ an.name }}</td>
</tr>
<tbody>
This will work, as per the documentation for ng-repeat.
...
<tr ng-repeat-start="ps in $ctrl.persons" ng-if="$ctrl.valuePersons == true && $first">
<th>PERSONS</th>
<td></td>
<td></td>
</tr>
<tr ng-repeat-end ng-if="$ctrl.valuePersons == true && !$first">
<td>{{ ps.id }}</td>
<td>{{ ps.birthday | date: 'dd.MM.yyyy'}}</td>
<td>{{ ps.name }}</td>
</tr>
...
This is long but can help you...
<table>
<tr>
<th>ID</th>
<th>BirthDay</th>
<th>NAME</th>
</tr>
<tr>
<td>Persons</td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="ps in $ctrl.persons">
<td>{{ps.id}}<td/>
<td>{{ps.bday}}<td/>
<td>{{ps.name}}<td/>
</tr>
<tr>
<td>Animals</td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="ps in $ctrl.animals">
<td>{{ps.id}}<td/>
<td>{{ps.bday}}<td/>
<td>{{ps.name}}<td/>
</tr>
</table>
var app = angular.module("Profile", [] );
app.controller("ProfileCtrl", function($scope) {
$scope.items = [{'title':'PERSON','data':[{'birth_day':'1/1/2011','name':'a1'},{'birth_day':'1/1/2011','name':'a2'},{'birth_day':'1/1/2011','name':'a3'}]},{'title':'ANIMALS','data':[{'birth_day':'1/1/2011','name':'a1'},{'birth_day':'1/1/2011','name':'a2'},{'birth_day':'1/1/2011','name':'a3'}]}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
<table class="table" border="1">
<thead>
<tr>
<th>ID</th>
<th>BIRTHDAY</th>
<th>Name</thu>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="item in items" ng-init="main_ind= $index">
<td colspan="3">{{item['title']}}</td>
</tr>
<tr ng-repeat-end ng-repeat="val in item['data']">
<td>{{$index+1}}</td>
<td>{{val['birth_day']}}</td>
<td>{{val['name']}}</td>
</tr>
</tbody>
</table>
</body>
So I find this filter here in SO and this filter doesn't have a $watch.
filter.js
.filter('myfilter', function ($filter, moment) {
return function (items, from, to) {
return $filter('filter')(items, 'name', function (v) {
var date = moment(v);
return date >= moment(from) && date <= moment(to);
});
};
})
table.html
<table class="table table-bordered table-sm">
<thead class="">
<tr>
<th>DAY</th>
<th>TIME IN</th>
<th>TIME OUT</th>
<th>DETAILS</th>
<th>TOTAL HOURS</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="attendance in displayedCollection | myfilter: startDate: endDate">
<td>{{ attendance.day | date: 'EEEE, MMM d'}}</td>
<td>{{ attendance.timeIn | date:'h:mm a' }}</td>
<td>{{ attendance.timeOut | date:'h:mm a'}}</td>
<td class="text-capitalize">
<i class="fa fa-map-marker" aria-hidden="true"></i> {{ attendance.details }}</td>
<td>{{ attendance.totalHrs | date:'hh:mm'}} </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<strong>Total</strong>
</td>
<td></td>
<td></td>
<td></td>
<td>
<strong>{{ vm.attendance.total }}</strong>
</td>
</tr>
</tfoot>
</table>
How do I watch the filter because displayedCollection.length is not changing?
I'm pretty new to AngularJS. I have two tables, one has a list of people that need interviews
// From vol.xslt
<section id="requested_interviews" class="row">
<h3>Unassigned Requests</h3>
<div class="table-responsive">
<table id="unassigned_table" class="table table-condensed">
<tr>
<th>Requested</th>
<th>First</th>
<th>Last</th>
<th>City</th>
<th>Region</th>
<th>Zip</th>
<th>Country</th>
<th>Action</th>
</tr>
<tr ng-repeat="p in prospects">
<td>{{ p.Requested }}</td>
<td>{{ p.First }}</td>
<td>{{ p.Last }}</td>
<td>{{ p.City }}</td>
<td>{{ p.Region }}</td>
<td>{{ p.Zip }}</td>
<td>{{ p.Country }}</td>
<td>
<button class="btn btn-small btn-default btn-block" ng-click="haversine( {{{{p.lat}}}}, {{{{p.lng}}}} )">Find Matches</button>
<button class="btn btn-small btn-default btn-block" ng-click="viewProspectDetais()">Prospect Details</button>
</td>
</tr>
</table>
</div>
When the user clicks the Find Matches button, the haversine function is called, which passes the latitude and longitude of the person into it, and the api responds with volunteers in that person's area:
// From controller
// Volunteer enpoint
$scope.haversine = function(lat, lng) {
$http.get(-- redact api url --).then(function(response) {
$scope.volunteers = response.data.row;
});
};
Now, when the function is triggered, it should update the view, and I think that's what I am having trouble with:
// From vol.xslt
<section id="potential_volunteers" class="row">
<h3>Potential Volunteers</h3>
<table class="table table-hover table-condensed">
<tr>
<th>First</th>
<th>Last</th>
<th>Street</th>
<th>Street 2</th>
<th>Street 3</th>
<th>City</th>
<th>Region</th>
<th>Zip</th>
<th>Country</th>
<th>Action</th>
</tr>
<tr ng-repeat="v in volunteers">
<td>{{ v.First }}</td>
<td>{{ v.Last }}</td>
<td>{{ v.Street_1 }}</td>
<td>{{ v.Street_2 }}</td>
<td>{{ v.Street_3 }}</td>
<td>{{ v.City }}</td>
<td>{{ v.Region }}</td>
<td>{{ v.Postal }}</td>
<td>{{ v.Country }}</td>
<td>
<button class="btn btn-small btn-default btn-block" ng-href="assignInterview()">Assign</button>
<button class="btn btn-small btn-default btn-block" ng-href="viewVolDetails()">Volunteer Details</button>
</td>
</tr>
</table>
I've verified that the endpoint works, and that my variables are showing up correctly within the button (XSLT requires my to use double braces for angular variables).
Thanks!
The answer was to change the start and end symbols for angular variables on the app itself. I guess that XSLT didn't like parsing the {{ and }} characters.
Changing my app declaration to
var app = angular.module('volApp',[]).config(function($interpolateProvider){
$interpolateProvider.startSymbol('[[').endSymbol(']]');
});
and all {{ to [[ and }} to ]] fixed the issue.
i am newbie at AngularJS and in now trying to learn it. This time i am learning how to create one page app using codeigniter and angular with RESTful lib.
I have JSON like this :
[{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]
i just cannot fetch it to $scope with ng-repeat working no matter what i do. This is my function :
$http.get('Api/items').then(function(response)
{
$scope.items = response;
console.log(response);
});
and this is my table view :
<table class="table table-bordered pagin-table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x.title }}</td>
<td>{{ x.description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
This is what happen when those all executed :
no array fetched by $scope at all. weird thing is the <tr> is repeated 5 time without any value. but when i call array[0] the $scope can fetch it :
<table class="table table-bordered pagin-table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x[0].title }}</td>
<td>{{ x[0].description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
Where did i go wrong?? can someone help me??
It is because the promise returning raw HTTP response from the server rather than parsed result data. You should try this instead :
$http.get('Api/items').then(function(response)
{
$scope.items = response.data;
console.log(response);
});
#digit already pointed the issue in you $hhtp call. Now For this JSON:
[{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]
.
No need to give index number inside ng-repeat. //{{ x[0].title }}
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x.title }}</td>
<td>{{ x.description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
I have a table that lists several objects in an array using ng-repeat and I was wondering, if there is an easy way to let the user select one of these objects by clicking on the row and viewing them in a separate <div>.
Here's the table:
<table class="table">
<tbody class="table-hover">
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Approver</th>
</tr>
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
</tbody>
</table>
Let's say the user clicked on the first row. He would now see a <div> that contains all the information in this row for that object.
<div>
{{campaigns[].name}}
...
</div>
It could be achieved by several way. One of them as below.
<table class="table">
<tbody class="table-hover">
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Approver</th>
</tr>
<tr ng-repeat-start="campaign in campaigns | filter: query" contenteditable="true" ng-click="campaign.showDetails = !campaign.showDetails">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
<tr ng-repeat-end ng-show="campaign.showDetails">
Your can dispalay here rest of the information from campaign object.
</tr>
</tbody>
You could seed the example http://codepen.io/anon/pen/beNbwp
Ok, so if I understand your problem, the solution could be to use ng-click :
(considering campaign.name unique for each campaigns)
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true" ng-click="doSmth(campaign.name)">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
Then in your controller :
$scope.doSmth = function(campName) {
$state.go(campName); //example
};
Another solution, using ui-sref :
Considering you define a url: '/folder/campaignPage?name' in your $stateProvider.
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true" ui-sref="campaignPage({ name: campaign.name })">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
Another way u can do it easily if u also create a button in ng-repeat like
<td><input type="button" value="select" class="btn btn-info btn-sm" ng-click="populate(campaign )" /></td>
And then
$scope.populate = function (campaign) {
$scope.Name = campaign.Name;
}
It's simple to use.