I have a select with options getting from server
<div class="form-group">
<label for="exampleInputEmail1">Terminal Type</label>
<select ng-model="terminal.terminalType" id="terminaltype" class="form-control" ng-options="type.name for type in types">
</select>
</div>
but how can I set option in my controller.
I used:
$("#terminaltype").val($scope.types[0]);
and
document.getElementById("terminaltype").options[i];
but it does not work. Please help me
Can't you set the value inside the model?
You have ng-model="terminal.terminalType"
Inside your controller, you just have to set a value to your item.
$scope.terminal.terminalType = "someValue";
Avoid mixing JQuery and Angular together.
Related
could you please tell me how to make dropdown without warning or ngModel in angular? I am getting warning this
code
https://stackblitz.com/edit/angular-vsjbr9?file=src%2Fapp%2Fapp.component.ts
how I will acheive the same thing without ngModel
<form novalidate [formGroup]="searchForm" class="calform">
<section class="col-sm-6 bg-white pl-20 pr-20">
<div class="form-group col-sm-8 pl-0">
<label class="field-title mb-5">Circle<span class="color-red fontWt"> *</span></label>
<div class="select width-170 mr-20">
<select formControlName="circle" [(ngModel)]="selectedCircle">
<option class='option'
*ngFor='let o of circle'
[disabled]="o.value==''"
[value]="o.value">{{o.option}}</option>
</select>
</div>
</div>
</section>
</form>
I want first option is selected by default and user never select first option in my example ("select from list never selected")
Something like this? https://stackblitz.com/edit/angular-zxeysz?file=src%2Fapp%2Fapp.component.ts
I've removed the ngmodel. You are already using a formgroup so ngmodel is not needed.
Then in your ts file , you do create the 'circle' control, but you assigned null value. I've altered it to empty string ''. This way the the select is pre-checked with the '' value.
I am using select inside ng-repeat. I am trying to map value coming from my api to select as selected value. I don't know what's wrong going from my side, please correct me.
Here is JSfiddle
HTML code
<div ng-repeat="trip in trips">
{{trip.type}}
<select ng-change="typeChanged(selectedType,trip.id)" id="" name="" ng-model="selectedType">
<option ng-selected="trip.type === t" ng-repeat="t in tripTypes">{{t}}</option>
</select>
</div>
JS code
$scope.trips=[];
$scope.trips=[{id:1,type:'confirmed'},{id:2,type:'cancelled'}];
$scope.tripTypes=['Confirmed','Quotation'];
I was making so silly mistake i guess because after doing below changes my code worked, i changed ng-model to trip.type from selectedType, so only it is possible for ng-selected to check condition.
<div ng-repeat="trip in trips">
{{trip.type}}
<select ng-change="typeChanged(selectedType,trip.id)" id="" name="" ng-model="trip.type">
<option ng-selected="trip.type === t" ng-repeat="t in tripTypes">{{t}}</option>
</select>
</div>
Here is working fiddle Check now
I have following code:
<h3>Дата наведвання:</h3>
<select class="form-control" size=info.size()>
<option ng-model="i.isSelected" ng-repeat="i in info" value="{{i.date}}">{{i.date}}</option>
</select>
<div class="container">
<table class="table">
<tr>
<td ng-repeat="i in info"><p ng-if="i.isSelected">Name: {{i.name}}</p></td>
</tr>
</table>
</div>
Sorry for dump question. This is simple, I would like my table to show data according to selected date. Please, help me to figure out.
ng-model should be there on select not on option tag. As ng-model does only working on input,textarea,select out of the box.
Markrup
<h3>Дата наведвання:</h3>
<select class="form-control" size="info.size()" ng-model="selectedInfo">
<option ng-repeat="i in info" value="{{i.date}}">{{i.date}}</option>
</select>
Where ng-model="selectedInfo" will enable two way binding over your select, & selected value would be available inside selectedInfo $scope variable.
The most preferred way to dealt with select with option by using ng-options
<h3>Дата наведвання:</h3>
<select class="form-control" size="info.size()"
ng-model="selectedInfo"
ng-options="i as i.date for i in info">
</select>
For showing selected to date you could use selectedInfo variable, you don't need to loop over each element of your info collection. You could directly do {{(info | filter: {date: selectedInfo: true })[0].Name}}(I'd not prefer to go for this approach).
As you're much interested to take whole element inside ng-model, ng-options can easily achieve(as I said earlier its preferred). In ng-options case you could do {{selectedInfo.Name}}
I need to fetch the selected data from the drop down list which is disabled using jQuery/Angular.js:
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Status :</span>
<select class="form-control" name="status" id="status" ng-model="status" ng-change="removeGSTValue('status');" disabled="disabled" >
<option value="">Select Status</option>
<option value="1">Active</option>
<option value="0">Inavtive</option>
</select>
</div>
One value has already selected and this field is disable one can view it can not change. I have to fetch the pre selected but it's not happening like that using jQuery serialize method. When I am using readonly the drop down value is changing.
You will want to use the readonly attribute and not disabled.
You could do a bunch of workarounds like using a non disabled hidden field to pass a value to jQuery serialize but just use the right HTML attribute and you'll be fine.
Also, you don't need jQuery serialize. Use a prefix to your ng-model like formData.status instead of status. Submit that formData value in your http request or just use JSON.stringify(formData).
I want to access ng-model value from one div to another div.
HTML:
<div class="form-group" ng-repeat="key in condition.keys">
<select class="form-control" ng-show="key.aggregator" ng-model="key.aggregator" ng-options="field.name as field.label for (name, field) in aggregators"></select>
<select class="form-control" ng-model="key.field" ng-options="s.field as s.field for s in subSchema($parent.condition,$index)" ng-change="onFieldChange($parent.condition,$index)" required>
<option value="">choose one</option>
</select>
</div>
<div class="form-group mb-left">{{key.field}}
<select class="form-control" ng-model="condition.operator" ng-options="field.name as field.label for (name, field) in fields | instanceFilter :key.field :condition" required>
<option value="">choose operator</option>
</select>
</div>
</div>
As you can see there is a key.field in ng-model in one div. I want to access this ng-model value on another div where you can see instanceFilter. Is it possible? Thanks in adavnce please solve this issue
In general, you can use the same ng-model binding in as many divs as you like which sit under the same scope.
It's not obvious what your code is trying to accomplish, but the "key.field" which you are binding to within your ng-repeat div is not in the same scope as the rest of the page outside the ng-repeat.
You should assign both the ng-model="key.field" to a different variable which is on the outer scope and not part of the key which only has scope for that individual item in your collection.
Go to that controller,
then assign
$rootScope.key.field=" ";
**
The rootScope is available in the entire application.
**