Angular select with ng-repeat doesnt work on json object - javascript

<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" value="{{option}}">{{option.name}}</option>
</select>
The Above code works but it leaves me unable to retrieve the id field of the option element. See the different Plunker - working example with value={{option.id}} https://plnkr.co/edit/?p=preview - example with value={{option}} https://plnkr.co/edit/iEoHaSYLZbnwId8zHi9U?p=preview.
If I use ng-options in select it works - https://plnkr.co/edit/iEoHaSYLZbnwId8zHi9U?p=preview.
Do I need to filter ng-model?

You can't retrieve the id because by passing the option object in value you're converting it to a string, so data.model became "{"id":"1","name":"Option A"}". In order to pass the object use instead ng-value:
<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" ng-value="{{option}}">{{option.name}}</option>
</select>

What I understand from your question the below code should work
<body ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<!--<select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-options="option as option.name for option in data.availableOptions">-->
<!-- </select>-->
<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
</form>
<hr>
<tt>model = {{data.model}}</tt><br/>
</div>
</body>

Related

How to set value in multiple select option in FORM in AngularJS?

Hmtl:
<div class="form-group">
<label for="loaisanpham">Loại Sản Phẩm</label>
<select class="form-control" name="idLoaisp" id="idLoaisp" ng-model="idLoaisp" ng-required=true>
<option ng-repeat="loaisanpham in loaisanphams | orderBy: 'tenLoaisp'" value="{{loaisanpham.idLoaisp}}">{{loaisanpham.tenLoaisp}}</option>
</select><br>
</div>
<div class="form-group">
<label for="phuong">Phường</label>
<select class="form-control" name="idVungxa" id="idVungxa" ng-model="idVungxa" ng-required=true>
<option ng-repeat="vungxa in vungxas | orderBy: 'tenVungxa'" value="{{vungxa.idVungxa}}">{{vungxa.tenVungxa}}</option>
</select><br>
</div>
JavaScript:
document.getElementById("idLoaisp").value = track.loaisanpham.idLoaisp;
document.getElementsById("idVungxa").value = track.vungxa.idVungxa;
Just idLoaisp show value in html and idVungxa not show.
I do not understand why it is not displayed. Help me. Tks all
Assign your value to the $scope in your controller.
$scope.idVungxa = track.loaisanpham.idLoaisp;
In plain HTML5 you would set the option as "selected":
like this:
<select multiple>
<option value="a">a</option>
<option value="b" selected>b</option>
<option value="c" selected>c</option>
</select>
There might be a different way to do it in Angular, but if this helps, you can use
<option [attr.selected]="boolean" ...
Remove the attribute "value" in the html options and set the value to the model, you have ng-model="idLoaisp" and ng-model="idVungxa" in the view so I guess in your controller you have that variables to store the values of the item selected, models are double binding that means you can also set the value to that model.
$ctrl.idLoaisp = track.loaisanpham.idLoaisp
$ctrl.idVungxa = track.vungxa.idVungxa

AngularJS ng-model on select input doesn't work

I'm starting with AngularJS and tried to do a and get its value with Angular, but it doesn't work.
<div id="app_container" ng-controller="ArticlesController as control">
<select name="sortby" id="sortby" ng-model="sortBy"> {{sortBy}}
<option name="Date" value="Date">Date</option>
<option name="Vues" value="Vues">Vues</option>
<option name="Note" value="Note">Note</option>
<option name="Catégorie" value="Catégorie">Catégorie</option>
<option name="Tags" value="Tags">Tags</option>
</select>
<div>
Here I want to display the value of the select input, but it displays nothing. I can't access this value from the controller neither, and I don't understand why.
I have a ng-repeat on the same page that works perfectly well.
I even tried to copy past the example from angularjs.org, even this doesn't work...
Since you are using controller as syntax, you need to use ng-model="controlsortBy"
DEMO
var app = angular.module('testApp',[]);
app.controller('ArticlesController',function(){
var control = this;
control.print = function(){
console.log(control.sortBy);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp">
<div id="app_container" ng-controller="ArticlesController as control">
<select name="sortby" id="sortby" ng-change="control.print()" ng-model="control.sortBy">
<option name="Date" value="Date">Date</option>
<option name="Vues" value="Vues">Vues</option>
<option name="Note" value="Note">Note</option>
<option name="Catégorie" value="Catégorie">Catégorie</option>
<option name="Tags" value="Tags">Tags</option>
</select>
<h1> {{control.sortBy}}</h1>
<div>

angular js select box comes empty option at first

I am using angular 1.6.4 I want to display ages in select box so get values from controller, I use below code, but first field will come empty? please help me how to solve it
<select ng-model="agefrom" name="agefrom" id="agefrom" class="select" style="width: 45%">
<option ng-repeat="age in ages" ng-value="age">{{age}}</option>
</select>
the first option comes empty because you did not select a ngModel. add value to ngModel and also use ng-options instead ng-repeat
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.ages = [2,3,4];
$scope.agefrom = $scope.ages[0]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="agefrom" name="agefrom" id="agefrom" class="select" style="width: 45%" ng-options="age as age for age in ages">
</select>
</div>
You can simply use ng-init like this
<select ng-init="agefrom = ages[0]"
ng-model="agefrom"
name="agefrom" id="agefrom" class="select"
style="width: 45%">
<option ng-repeat="age in ages" ng-value="age">{{age}}</option>
</select>

Angular: Conditional field doesn't work with server side

i have a conditional field like this :
<form ng-app="myApp" name="frm">
<select ng-model="NewBranchRequest.BranchTypeCode">
<option selected="selected" value="0">third</option>
<option value="1">first</option>
<option value="2">second</option>
</select>
<input class="ng-pristine ng-valid" type="text" name="power" ng-model="NewBranchRequest.PwrCnt" placeholder="sad" ng-required="NewBranchRequest.BranchTypeCode==0">
<span style="color:red" ng-show="frm.power.$invalid">
*
</span>
<button>Submit</button>
</form>
Demo
it works, but option fill from server and it doesn't work.
UPDATE
Check This Demo which is not working .
All i want is after select Bug in select list, input get rquired .
Any idea ?
In http://jsfiddle.net/sadeghbayan/MTfRD/1452/
change
ng-required="form.type==0"
to
ng-required="form.type=='bug'"
I made the changes here: http://jsfiddle.net/MTfRD/1453/
In addition, if you want to get the json object in form.type you can change this
ng-options='option.value as option.name for option in typeOptions'
to
ng-options='option.value for option in typeOptions'

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

Categories