We Keep Coding

The default value is not ? object:null ? in select option Angularjs

This is code in file js
$scope.ListOption = [];
$scope.ListOption.push({ Value: "0", Name: Car });
$scope.ListOption.push({ Value: "1", Name: House });
Here's what the code HTML looks like
<select class="form-control" id="Category" ng-model="Category">
<option ng-repeat="option in ListOption" value="{{option.Value}}">
{{option.Name}}</option>
</select>
The generated html is
<select class="form-control ng-pristine ng-valid" ng-model="Category" style="padding: 0px;">
<option value="? object:null ?"></option>
<option ng-repeat="option in ListOption" value="0" class="ng-binding ng-scope">Car</option>
<option ng-repeat="option in ListOption" value="1" class="ng-binding ng-scope">House</option>
</select>
I have quite a headache on this issue. Looking forward to having someone help me the other way.

it's wrong. you are matching with option. Change it. I suggest, use the track by $index for no repeat options
<option value="{{option.Value}}" ng-repeat="option in ListOption track by $index">
{{option.Name}}
</option>

I think the mistake is that you used the main array to get value instead of iterable option object. Actually, this should work:
<select class="form-control" id="Category" ng-model="Category">
<option ng-repeat="option in ListOption" value="{{option.Value}}">
{{option.Name}}
</option>
</select>

Hope this is helpfull :)
VIEW
<select class="form-control" data-ng-options="list.Name for list in ListOption" data-ng-model="selectedValue">
MODEL
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http, $log) {
$scope.ListOption = [];
$scope.ListOption.push({ Value: "0", Name: "Car" });
$scope.ListOption.push({ Value: "1", Name: "House" });
$scope.selectedValue = [];
$scope.selectedValue = $scope.ListOption[0];
});

Displaying a table based on drop down value

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

Angular filter for gender using select dropdown

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 .

Set default values in two selects?

I have some problem with my selects. Here is code:
<select ng-model="car" ng-options="car.name for car in cars track by car.id" class="form-control">
<option value="">Choose model name</option>
</select>
<br />
<select ng-options="model.name for model in car.models track by model.id" ng-model="model" class="form-control">
<option value="">Choose car</option>
</select>
I want that when i visit this page that the two selects have default values. For example in first select - "BMW" and in second - "528I" at the same time. I'm trying to do this solution:
<select ng-model="car" ng-init="car.id = 1" ng-options="car.name for car in cars track by car.id" class="form-control">
<option value="">Choose model name</option>
</select>
<br />
<select ng-init="model.id = 5" ng-options="model.name for model in car.models track by model.id" ng-model="model" class="form-control">
<option value="">Choose car</option>
</select>
But it work only for the fisrt select. (And when i choose the name in first select with name with id = 1, the second select to switch to the model with id = 5;)
I don't know how to reailze default values in two selects at the same time.
Have you any ideas?
Here is plunker

You could just use ng-init, like this:
<select ng-init="car=cars[0]" ng-model="car" ng-options="car.name for car in cars" class="form-control">
<option value="">Choose model name</option>
</select>
<br />
<select ng-init="model=car.models[0]" ng-options="model.name for model in car.modelsd" ng-model="model" class="form-control">
<option value="">Choose car</option>
</select>
UPDATE
The syntax of your select was a bit off, you actually don't need to use track by unless you are grouping the values of your select, which you are not. I think that what you actually wanted was to have the model bound to the id of the 'car' rather than having the model bound to the car itself. If that's what you want you could do it like this:
<select ng-init="car=1" ng-model="car" ng-options="car.id as car.name for car in cars" class="form-control">
<option value="">Choose model name</option>
</select>
But then you would have to do something very awkward in order to render the second select with the models of the car, because in that case your variable car would be an int (the id of the car), not the 'car' object, so you would have to do something like this:
<select ng-init="model=5" ng-model="model" ng-options="model.id as model.name for model in ((cars | filter:{id:car})[0].models)" class="form-control">
<option value="">Choose car</option>
</select>
Which is just as awkward as it looks, but if that's what you want... well, here you have an example:
Working example
A better idea in my opinion would be to have the models pointing to the objects, and if you want to initialize the selects through the id, you could do this in the ng-init :
<select ng-init="car=(cars|filter:{id:1})[0]" ng-model="car" ng-options="car.name for car in cars" class="form-control">
<option value="">Choose model name</option>
</select>
<br />
<select ng-init="model=(car.models|filter:{id:5})[0]" ng-options="model.name for model in car.models" ng-model="model" class="form-control">
<option value="">Choose car</option>
</select>
Working Example

You may use ng-model attribute in your controller and assign a default variable like
<div ng-controller="MyController" >
<form>
<select ng-model="myForm.car">
<option value="nissan">Nissan</option>
<option value="toyota">Toyota</option>
<option value="fiat">Fiat</option>
</select>
</form>
<div>
{{myForm.car}}
</div>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myForm = {};
$scope.myForm.car = "nissan";
} );
</script>
jsbin
and go through this link so that you will come to know form handling in angularjs:
http://tutorials.jenkov.com/angularjs/forms.html

AngularJS <select> not saving value in object?

I have this select element in a row (of which there can be a few) which represents an item. But the scope for manufacturer does not update when this is selected. The default for the item's manufacturer attribute is null (since when it's created - it no manufacturer has been selected yet)
<select ng-model="manufacturer" ng-options="manufacturers.name for manufacturers in manufacturers" ng-change="change()" class="ng-valid ng-dirty">
<option value="" selected="selected" class=""> --Select a Manufacturer--</option>
<option value="0">Choice1</option>
<option value="1">Choice2</option>
<option value="2">Choice3</option>
</select>
I guess my question is - how do I get the manufacturer attribute in the item to update with the select box?
Thanks!
If it helps - here's the scope of the cams item:
$scope.cams = [
{channels:1, manufacturer:null},
{channels:1, manufacturer:null}
];

Turns out ng-model="manufacturer" should have been ng-model="cam.manufacturer":
<select ng-model="cam.manufacturer" ng-options="manufacturers.name for manufacturers in manufacturers" ng-change="change()" class="ng-valid ng-dirty">
<option value="" selected="selected" class=""> --Select a Manufacturer--</option>
<option value="0">Choice1</option>
<option value="1">Choice2</option>
<option value="2">Choice3</option>
</select>
Now it works perfectly.

You could use this:
HTML
<selectmultiple ng-model="selectedValues">
<option ng-repeat="lang inLanguages" value="{{lang.name}}" ng-click="selected(selectedValues)">{{lang.name}}</option>
</select>
angularjs:
$scope.selected = function(nowSelected){
$scope.selectedValues = [];
if( ! nowSelected ){
return;
}
angular.forEach(nowSelected, function(val){
$scope.selectedValues.push(val);
});
};