We Keep Coding

How to add default option in select for AngularJS?

I don't know why this is not adding a default selected view:
I thought ng-init would make it have a default selected view.
How do I make the drop down box menu have a default selected value?
<select ng-init="selectedCar = Cars[0]" ng-model="selectedCar" class="form-control" ng-required="true">
<option value="" selected>Select a job title</option>
<option ng-repeat="car in Cars" ng-value="car.firstname car.lastname">
{{car.firstname}} {{car.lastname}}
</option>
</select>

You can try to initialize selectedCar in your controller rather ng-init.
Try the below code.
In your controller initialize it.
For e.g:
$scope.selectedCar = $scope.Cars[0];
And in the template:
<select ng-model="selectedCar" class="form-control" ng-required="true">
<option value="" selected>Select a job title</option>
<option ng-repeat="car in Cars" ng-value="car.firstname car.lastname" ng-selected="selectedCar.id == car.id">
{{car.firstname}} {{car.lastname}}
</option>
</select>
Or
You can try using ng-options. Reference Another way by using ng-options

You can set the default value for the select element by binding the ng-model with the variable you assigned with ng-init since ng-init doesn't assign the default value for the select and option components, but the default value to a variable in the scope.
Try using selected in option to select the default value.
<select ng-init="selectedCar = Cars[0]" ng-model="selectedCar" class="form-control" ng-required="true">
<option value="" selected>Select a job title</option>
<option ng-repeat="car in Cars" ng-value="car.firstname car.lastname" selected>
{{car.firstname}} {{car.lastname}}
</option>
Or you can use ng-selected
<select ng-init="selectedCar = Cars[0]" ng-model="selectedCar" class="form-control" ng-required="true">
<option value="" selected>Select a job title</option>
<option ng-repeat="car in Cars" ng-value="car.firstname car.lastname" ng-selected="$first">
{{car.firstname}} {{car.lastname}}
</option>

forEach required field only

I've been able to successfully perform a forEach over all select fields but I cant evaluate required selects only. How can I adjust my js to apply only to the required fields?
<form>
<div>
<select required="true">
<option value>- Select -</option>
<option value>- option 1 -</option>
<option value>- option 2 -</option>
</select>
</div>
<div>
<select required="true">
<option value>- Select -</option>
<option value>- sample 1 -</option>
<option value>- sample 2 -</option>
</select>
</div>
<div><select>
<option value>- Select -</option>
<option value>- optional 1 -</option>
<option value>- optional 2 -</option>
</select>
</div>
</form>
<script>
let check_inputs = js_form.querySelectorAll("select :checked");
[].forEach.call(sel_inputs, function (elm) {
if (!elm.value) {
not_pass = true;
elm.closest(".usa-form-group").classList.add(error_container_class);
} else {
elm.closest(".usa-form-group").classList.remove(error_container_class);
}
});
</script>
but my attempt is always true. How can I apply the class to only required fields within this forEach?
[].forEach.call(sel_inputs, function (elm) {
if (!elm.value && !elm.hasAttribute("required")) {
not_pass = true;
elm.closest(".usa-form-group").classList.add(error_container_class);
} else {
elm.closest(".usa-form-group").classList.remove(error_container_class);
}
});

Using document.querySelectorAll("select[required=true]") as your element selector returns only select elements that have the required attribute set to true. This uses CSS selectors and more information about that can be found on W3Schools.
document.querySelectorAll("select[requred=true]").forEach(function(elem){
// Function code here...
});

Trigger event on selection of second box, Angular

I have 2 boxes the first you select parent, second you select the child of a selected parent.
How do I run the function bellow after the second selection ?
angular function
$scope.myFunc = function() {
var jsonItem = JSON.parse($scope.formData.formatType.id);
sessionStorage.setItem('format', jsonItem);
}
HTML
<select ng-model="formData.ProductType.name" ng-change="productTypeChange()" ng-options="product.name as product.name for product in productsandformats">
<option value="">- Please Choose -</option>
</select>
<select ng-model="formData.formatType" ng-options="format.Fname for format in formats.format" ng-if="formData.ProductType.name">
<option value="">- Please Choose -</option>
</select>

Use ng-change
<select ng-model="formData.formatType"
ng-options="format.Fname for format in formats.format"
ng-if="formData.ProductType.name" ng-change="myFunc()">
<option value="">- Please Choose -</option>
</select>`

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);
});
};