I want to display a table of questions based on what the user selected on the drop down menu. Once the user selects a category, I want to send that data to the api using get method. I'm using angularjs as the controller. The problem is that the table is not being populated by any values after calling the get method. I am not sure if my approach is correct.
html
<h3>View Quiz By:</h3>
<select name="singleSelect" ng-model="data.singleSelect">
<option value="math">Math</option>
<option value="science">Science</option>
<option value="history">History</option>
<option value="compscience">Computer Science</option>
<option value="other">Other</option>
</select>
<tt>singleSelect = {{data.singleSelect}}</tt>
<br><br><br>
<div ng-controller="selectOptionController">
<table>
<tr>
<th>Id</th>
<th>Question</th>
<th>Answer</th>
<th>OptionA</th>
<th>OptionB</th>
<th>OptionC</th>
<th>OptionD</th>
</tr>
<tr ng-repeat="row in result">
<td>{{row.id}}</td>
<td>{{row.question}}</td>
<td>{{row.answer}}</td>
<td>{{row.optionA}}</td>
<td>{{row.optionB}}</td>
<td>{{row.optionC}}</td>
<td>{{row.optionD}}</td>
</tr>
</table>
</div>
angularjs
angular.module('staticSelect', [])
.controller('selectOptionController', ['$scope', function($scope) {
$scope.data = {
singleSelect: null
};
$http.get("http://localhost:8080/quiz/webapi/quiz/"+data)
.then(function(response) {
$scope.result = response.data;
});
}]);
Once the user selects a category, I want to send that data to the api using get method.
You can add ng-change to your <select>
<select name="singleSelect" ng-model="data.singleSelect" ng-change="onChange()">
<option value="math">Math</option>
<option value="science">Science</option>
<option value="history">History</option>
<option value="compscience">Computer Science</option>
<option value="other">Other</option>
</select>
and in Controller write:
$scope.onChange = function(){
$http.get("http://localhost:8080/quiz/webapi/quiz/"+$scope.data.singleSelect)
.then(function(response) {
$scope.result = response.data;
});
};
A a side note:
If you want to build select options by angularjs way use ng-options:
$scope.list = [
{value: 'science', name: 'Science'},
{value: 'history', name: 'History'},
{value: 'compscience', name: 'Computer Science'},
{value: 'other', name: 'Other'}
];
and your select:
<select name="singleSelect"
ng-model="data.singleSelect"
ng-change="onChange(data.singleSelect)"
ng-options="item.value as item.name for item in list"
> </select>
Demo
Related
I have a list of orders and a dropwdown list to filter orders depending on their status. Statuses are: not delivered, fully delivered and partially delivered. Filtering works fine with those 3 options, however I would like to implement one extra option that shows both not delivered and partially delivered orders together.
<select class="form-control" id="status" ng-model="orderFilter.status"
ng-init="orderFilter.status = '_'">
<option value="_">all</option>
<option value="_not" class="text-danger">not delivered</option>
<option value="_part" class="text-info">partially delivered</option>
<option value="n-p" class="text-warning">not and partial</option>
<option value="_done" class="text-success">delivered</option>
</select>
So I've added a new "custom" value, and the way it all works is, it is making copy of objects which are either one or the other, and that is bad, redundant and not what I want.
I thought it may be possible something like:
<option value="_not || _part" class="text-warning">not and partial</option>
Filtering part:
<tr ng-repeat="s in vm.sales | filter: orderFilter">
<td>...</td>
</tr>
The best solution is to write your own filter, if you don't want to do that for some reason, than you can filter the list programmaticaly and updating the list depending on selected value:
<select class="form-control" ng-change="filterSales()" id="status" ng-model="orderFilter.status"
ng-init="orderFilter.status = '_'">
<option value="_">all</option>
<option value="_not" class="text-danger">not delivered</option>
<option value="_part" class="text-info">partially delivered</option>
<option value="n-p" class="text-warning">not and partial</option>
<option value="_done" class="text-success">delivered</option>
</select>
And than in your controller somewhere:
$scope.filterSales = function(){
if($scope.orderFilter.status === 'n-p'){
var filteredWithNoStatus = $filter('filter')($scope.vm.sales,'_not');
var filteredWithPartStatus = $filter('filter')($scope.vm.sales,'_part');
$scope.filteredList = Object.assign(filteredWithNoStatus,filteredWithPartStatus);
}else{
$scope.filteredList = $filter('filter')($scope.vm.sales,$scope.orderFilter.status);
}
}
In your html you can remove than the filter
<tr ng-repeat="s in filteredList>
<td>...</td>
</tr>
Sorry that I didn't had the time to test the code, but I hope you understand the Idea.
If your possible statuses aren't going to change you could use !_done as your option value which would filter out the _done but leave _not and _part.
var app = angular.module("app", []);
app.controller("controller", function($scope) {
$scope.orderFilter = {
status: "_"
};
$scope.sales = [{
status: "_not",
item: "NOT"
},
{
status: "_part",
item: "PART"
},
{
status: "_done",
item: "DONE"
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
<select class="form-control" id="status" ng-model="orderFilter.status">
<option value="_">all</option>
<option value="_not" class="text-danger">not delivered</option>
<option value="_part" class="text-info">partially delivered</option>
<option value="!_done" class="text-warning">not and partial</option>
<option value="_done" class="text-success">delivered</option>
</select> {{orderFilter}}
<table>
<tbody>
<tr ng-repeat="s in sales | filter: orderFilter.status">
<td>{{s.item}}</td>
</tr>
</tbody>
</table>
</div>
Otherwise you'd need to write a custom filter. See the snippet below which let's you add multiple values e.g. "_not, _part" would return both not and partially delivered items.
var app = angular.module("app", []);
app.controller("controller", function($scope) {
$scope.orderFilter = {
status: ""
};
$scope.sales = [{
status: "_not",
item: "NOT"
},
{
status: "_part",
item: "PART"
},
{
status: "_done",
item: "DONE"
}
];
});
app.filter("filterByProp", function() {
return function(items, prop, filterVal) {
// don't filter if no value to filter on
if (!filterVal) {
return items;
}
// split filter val to allow for multiple props e.g. "_not, _part"
var filters = filterVal.replace(" ", "").split(",");
// only return items which match at least one of the values
return items.filter(function(item) {
return filters.indexOf(item[prop]) > -1
});
};
});;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
<select class="form-control" id="status" ng-model="orderFilter.status">
<option value="">all</option>
<option value="_not" class="text-danger">not delivered</option>
<option value="_part" class="text-info">partially delivered</option>
<option value="_not, _part" class="text-warning">not and partial</option>
<option value="_done" class="text-success">delivered</option>
</select> {{orderFilter}}
<table>
<tbody>
<tr ng-repeat="s in sales | filterByProp : 'status' : orderFilter.status">
<td>{{s.item}}</td>
</tr>
</tbody>
</table>
</div>
Hi I am trying to make a single page angular js application but while adding to the list "schedulelist" only the latest record are getting pushed into the list and all the previous records are getting replaced by the latest record
This is my Html:
<table class="table1" cellspacing=2 cellpadding=5 border=0>
<div ng-repeat="scheduleDTO in schedules">
<tr>
<td>
<SELECT id="days" name="days" class="form-right" style="width:90%" ng-model="scheduleDTO.day_of_the_week" required>
<OPTION selected value="Monday">Monday</OPTION>
<OPTION value="Tuesday">Tuesday</OPTION>
<OPTION value="Wednesday">Wednesday</OPTION>
<OPTION value="Thursday">Thursday</OPTION>
<OPTION value="Friday">Friday</OPTION>
<OPTION value="Saturday">Saturday</OPTION>
<OPTION value="Sunday">Sunday</OPTION>
</SELECT>
</td>
<td>
<SELECT id="start_time" name="Start" class="form-right" style="width:90%" ng-model="scheduleDTO.start_time" required>
<OPTION value="1:00">01:00</OPTION>
<OPTION value="2:00">02:00</OPTION>
<OPTION value="3:00">03:00</OPTION>
<OPTION value="4:00">04:00</OPTION>
<OPTION value="5:00">05:00</OPTION>
<OPTION value="6:00">06:00</OPTION>
<OPTION value="7:00">07:00</OPTION>
<OPTION value="8:00">08:00</OPTION>
<OPTION selected value="9:00">09:00</OPTION>
<OPTION value="10:00">10:00</OPTION>
<OPTION value="11:00">11:00</OPTION>
<OPTION value="12:00">12:00</OPTION>
</SELECT>
</td>
<td>
<SELECT id="start" name="am" class="form-right" style="width:90%" ng-model="scheduleDTO.start_time_meridiem"required>
<OPTION selected value="AM">AM</OPTION>
<OPTION value="PM">PM</OPTION>
</SELECT>
<td><SELECT id="end_time"class="form-right" name="end" style="width:90%" ng-model="scheduleDTO.end_time" required>
<OPTION value="1:00">01:00</OPTION>
<OPTION value="2:00">02:00</OPTION>
<OPTION value="3:00">03:00</OPTION>
<OPTION value="4:00">04:00</OPTION>
<OPTION selected value="5:00">05:00</OPTION>
<OPTION value="6:00">06:00</OPTION>
<OPTION value="7:00">07:00</OPTION>
<OPTION value="8:00">08:00</OPTION>
<OPTION value="9:00">09:00</OPTION>
<OPTION value="10:00">10:00</OPTION>
<OPTION value="11:00">11:00</OPTION>
<OPTION value="12:00">12:00</OPTION>
</SELECT>
</td>
<td>
<SELECT id="end" name="pm" class="form-right" style="width:90%" ng-model="scheduleDTO.end_time_meridiem" required>
<OPTION value="AM">AM</OPTION>
<OPTION selected value="PM">PM</OPTION>
</SELECT>
</td>
<td><input type="button" class="addSch" ng-click="add(scheduleDTO)" value="Add Schedule" style="width:90%"> <!-- add_schedule(); -->
</td>
</tr>
</div>
</table>
<table align='center' class="table1" cellspacing=2 cellpadding=5 id="table" border=0>
<tr ng-repeat="ScheduleDTO in schedulelist">
<td>{{scheduleDTO.day_of_the_week}}</td>
<td>{{scheduleDTO.start_time}}</td>
<td>{{scheduleDTO.start_time_meridiem}}</td><td>To</td>
<td>{{scheduleDTO.end_time}}</td>
<td>{{scheduleDTO.end_time_meridiem}}</td>
<td><input type='button' value='Delete' class='delete' ng-click="remove(scheduleDTO)"></td>
</table>
This is rthe controller:
$scope.schedulelist = [
];
$scope.add = function (schedule)
{ schedule.volunteer_id="";
schedule.sid="";
$scope.schedulelist.push({"ScheduleDTO":schedule});
alert(angular.toJson($scope.schedulelist));
};
$scope.remove = function(schedule) {
var index = $scope.schedulelist.indexOf(schedule);
$scope.schedulelist.splice(index, 1);
alert(angular.toJson($scope.schedulelist));
};
Use Angular#copy to avoid reference copy in the modal,
which is the same one getting used again and data is overwritten.
$scope.schedulelist.push({"ScheduleDTO":angular.copy(schedule)});
there is only one instance of an object in javascript if you create an object there will be single reference to it, i.e if you change in the object all the values will be changed so even you are changing the value every time it all the values pushed in the array will refer to the same object.
better solution will be
$scope.add = function (scheduleValue)
{
var schedule=angular.copy(scheduleValue);
schedule.volunteer_id="";
schedule.sid="";
$scope.schedulelist.push({"ScheduleDTO":schedule});
alert(angular.toJson($scope.schedulelist));
};
The problem is in this line
$scope.schedulelist.push({"ScheduleDTO":schedule});
each team a record is pushed to the ScheduleDTO property of the object and each time new entry replaces the old one.
You can do something like this
$scope.add = function (schedule)
{ schedule.volunteer_id="";
schedule.sid="";
//Create an array of ScheduleDTO
if( $scope.schedulelist.ScheduleDTO instanceof Array == false) {
$scope.schedulelist.ScheduleDTO = []
}
//Push the schedule into the array
$scope.schedulelist.ScheduleDTO.push(schedule);
alert(angular.toJson($scope.schedulelist));
};
Use angular copy and and also change variable name from select box and list. Please check this fiddle
(function($){
try{
var demoApp = angular.module('demoApp',[]);
demoApp.controller('demoController',['$scope',function($scope){
$scope.schedulelist = [
];
$scope.add = function (scheduleObject) {
var schedule = angular.copy(scheduleObject)
schedule['volunteer_id']="";
schedule['sid']="";
$scope.schedulelist.push(
{"ScheduleDTO":schedule}
);
};
$scope.remove = function(schedule) {
var index = $scope.schedulelist.indexOf(schedule);
$scope.schedulelist.splice(index, 1);
alert(angular.toJson($scope.schedulelist));
};
}])
}catch(e){
console.log(e)
}
})(jQuery)
I need to set the status select box to the value of customer.lStatus. However,
the select box does not get updated with a value, unless I manually write the
HTML beforehand. Wha?
Script
<script>
// ...
data () {
return {
customer: {
dLastUpdate: '2016-02-17 15:07:06',
lKey: '1007',
lLastUpdateBy: '1000',
lStatus: '100015',
sName: 'TestAgain'
},
statuses: [
[100013, 'Active'],
[100015, 'Deactivated'],
[100012, 'On Hold'],
[100014, 'On Notice'],
[100011, 'Pending']
]
};
},
// ...
</script>
Does not work
<select class="form-control" v-model="customer.lStatus">
<option v-for="status in statuses" value="status[0]">{{status[1]}}</option>
</select>
Works
<select class="form-control" v-model="customer.lStatus">
<option value="100013">Active</option>
<option value="100015">Deactivated</option>
<option value="100012">On Hold</option>
<option value="100014">On Notice</option>
<option value="100011">Pending</option>
</select>
You are missing a colon in the value attribute.
Try:
<select class="form-control" v-model="customer.lStatus">
<option v-for="status in statuses" :value="status[0]">{{status[1]}}</option>
</select>
I have a database that need to be filtered by gender. Everything is working fine.
But when i filter by gender, as female is part of male, female is also showing up.
If i pick female, then male is hiding off.
Here is my jsfiddle link
<select name="" id="" ng-model="test.filterByGender">
<option value="">By Gender</option>
<option value="female">Female</option>
<option value="male">Male</option>
</select>
This seems to be working.
https://jsfiddle.net/kg2kscnw/14/
<tr ng-repeat="subject in test.subjects | filter:test.filterByState | filter:(!!test.filterByGender || undefined) && test.filterByGender:true | filter:test.filterByAge">
<td>{{subject.name}}</td>
<td>{{subject.gender}}</td>
<td>{{subject.age}}</td>
</tr>
If you set the comparator to true, it sets up a strict comparison of actual and expected, so it can see that 'male' is not the same as 'female'. But then it doesn't recognise the empty value of the 'By gender' field. In order to get around this, you can tell the filter to only be applied if the value is not empty or undefined.
Hope this helps.
From doc
Selects a subset of items from array and returns it as a new array.
It works like String.Contains method. So when you select male from drop-down, it shows all data because female also contains male sub-string.
var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
vm = this;
vm.subjects = [
{
name : "Alpha",
location:"TN",
age : "25",
gender:"female"
},
{
name : "Beta",
location:"TN",
age : "44",
gender:"male"
},
{
name : "Gamma",
location:"KE",
age : "20",
gender:"female"
},
{
name : "Theta",
location:"AN",
age : "22",
gender:"female"
},
];
angular.forEach( vm.subjects, function(subject){
if(parseInt(subject.age) <= 25){
subject.ageFilterCriteria = '<25'
}
else{
subject.ageFilterCriteria = '>25'
}
})
console.log(vm.subjects);
vm.filterByAge = '';
vm.filterByState='';
vm.filterByGender='';
vm.setFlag = function(value){
if(value)
vm.flag = true;
else
vm.flag = false;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl as test">
<select name="" id="" ng-model="test.filterByState">
<option value="">Select a state</option>
<option value="TN">TamilNadu</option>
<option value="KE">Kerala</option>
<option value="AN">Andra Pradesh</option>
</select>
<select name="" id="" ng-model="test.filterByGender" ng-change="test.setFlag(test.filterByGender)">
<option value="">By Gender</option>
<option value="female">Female</option>
<option value="male">Male</option>
</select>
<select name="" id="" ng-model="test.filterByAge">
<option value="">Select All</option>
<option value="<25">Less Than 25</option>
<option value=">25">Greater Than 25</option>
</select>
<table>
<tr ng-repeat="subject in test.subjects |filter:{location:test.filterByState,ageFilterCriteria:test.filterByAge}| filter:{gender:test.filterByGender}:test.flag">
<td>{{subject.name}}</td>
<td>{{subject.gender}}</td>
<td>{{subject.age}}</td>
</tr>
</table>
</div>
try this:
<select name="" id="" ng-model="test.filterByGender" ng-change="test.flag =true">
<option value="">By Gender</option>
<option value="female">Female</option>
<option value="male">Male</option>
</select>
<tr ng-repeat="subject in test.subjects |filter:{location:test.filterByState,ageFilterCriteria:test.filterByAge}|
filter:{gender:test.filterByGender}:test.flag">
Actually Filter give the result on the basis of matching items.So female rows are showing when you select male from drop-down because "female" word contains the "male" word .
Here is my HTML
<select class="height_selected">
<option>Select Height</option>
<option ng-model="userHeight" ng-init="1" value="1">123 cm</option>
<option ng-model="userHeight" ng-init="2" value="2">125 cm</option>
<option ng-model="userHeight" ng-init="3" value="3">124 cm</option>
</select>
<a type="button" ng-click="updateHeight()">Save</a></div>
In the controller i do
userHeight = $scope.userHeight;
But i am not getting any value.
How can i get the value ?
You wrongly used ng-model for options. It is used for only inputs fields like input box, textarea, select
For More Reference
it comes like
<select class="height_selected" ng-model="userHeight">
<option>Select Height</option>
<option value="1">123 cm</option>
<option value="2">125 cm</option>
<option value="3">124 cm</option>
</select>
Now only you get the value
put ng-model in select.
also if you want to select 1 item default than
$scope.userHeight = "/value of option/";
Here you are:
var app = angular.module('app', []);
app.controller('controller', ['$scope', controllerFunction]);
function controllerFunction($scope) {
$scope.companies = [{
'id': 1,
'name': "c1"
}, {
'id': 2,
'name': "c2"
}];
$scope.companyChange = function() {
alert(angular.toJson($scope.company));
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
<select ng-model="company" ng-options="c.name for c in companies track by c.id" ng-change="companyChange()">
<option value="">All</option>
</select>
</div>
Refer more: https://docs.angularjs.org/api/ng/directive/ngOptions
Hope this helps.