AngularJS ng-change not working correctly - javascript

So, this is my select html:
<select
class="custom-select mb-2 col-md-4 col-12 mr-sm-2 mb-sm-0"
ng-model="serverSelected"
ng-change="onServerSelect(serverSelected)"
>
<option *ngFor="let server of servers"
value="{{ server.display_name }}"
>{{server.display_name}}</option>
</select>
server.component.ts:
onServerSelect(serverSelected){
console.log(this.serverSelected.displayName);}
How to get this selected server.display_name to be displayed in my onServerSelect() method, because this is not working. What am i doing wrong?

Actually what are you using ? Angularjs or Angular? If you are using Angularjs then you are mixing the angular syntax *ngFor. Instead you can use ng-repeat or ng-options. Read this for more information AngularJs Select

do this way
why mixing *ngFor in angular 1
syntax must be ng-repeat.
angular 1 ex.
ng-model,
ng-if,
ng-repeat,
etc.
angular 2 >
*ngModel,
*ngIf,
*ngFor,
etc.
<select class="custom-select mb-2 col-md-4 col-12 mr-sm-2 mb-sm-0">
<option ng-repeat="let server of servers" value="{{ server.display_name }}" ng-model="serverSelected">
<span ng-change="onServerSelect(serverSelected)">
{{server.display_name}}
</span>
</option>
</select>

Related

how to make dropdown without warning or ngModel in angular?

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.

How to use select inside ng-repeat and keep value selected on api call data

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

Dropdown in ng-repeat is not working properly

I am working on a project wer I need to show Questionnaries and Answer dropdown related to that in ng-repeat.
When I check on dropdown I am calling an API to fetch answer information to show it in dropdown.
when I click on 1st dropdown it opens up properly and show all the data.
But when I click on second time on any dropdown it wont open up properly.
Can anyone help me know what is the issue.
Below is the code for it.
<tr ng-repeat="question in questionnaireData track by $index">
<td><span class="" title="{{question.QuestionItem}}">{{question.QuestionItem}}</span></td>
<td>
<div class="">
<!--<label for="answers">Select Answer</label>-->
<select ng-if="question.MasterDataCategoryId != null" id="{{question.QuestionId}}" ng-model="question.MasterData" class="form-control" ng-click="getAnswersDetails(question)">
<option selected="selected"></option>
<option ng-repeat="answer in answerData[question.MasterDataCategoryId]" value="{{answer.MasterData}}">{{answer.MasterData}}</option>
</select>
<input ng-if="question.MasterDataCategoryId == null" id="{{question.QuestionId}}" ng-model="question.MasterData" type="text" name="question.QuestionId" class="form-control">
<!--<span class="help-inline" ng-show="submitted && formVHD.$valid"></span>-->
</div>
</td>
If you want to create a Dropdown list its better to use ng-option then ng-repeat.
<select ng-option="x.data for x in myItems">
</select>
Because the ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage:
Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.
Also You have used same ng-model, id for select and input type text I don't think that's a good idea
<input ng-if="question.MasterDataCategoryId == null" id="{{question.QuestionId}}" ng-model="question.MasterData" type="text" name="question.QuestionId" class="form-control">
<select ng-if="question.MasterDataCategoryId != null" id="{{question.QuestionId}}" ng-model="question.MasterData" class="form-control" ng-click="getAnswersDetails(question)">
In your case your select should look like this and you should use ng-change instead of ng-click.
<select ng-if="question.MasterDataCategoryId != null" id="{{question.QuestionId}}" ng-model="question.MasterData" class="form-control" ng-change="getAnswersDetails(question)" ng-option="answer.MasterData for answer in answerData[question.MasterDataCategoryId]">
<option selected="selected"></option>
</select>

Access ng-model from one div to another div

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.
**

ngOptions in Angular not generating options

I need some help from angularjs ninjas...
I am currently using cake with angular. I have a rest controller which allows angular to communicate and get a list of options.. the service returns a serialized json as shown below
Below is how im trying to generate the options for the dropdown :
<div class="row" ng-controller="trackerCtrl">
<div class="col-md-4">
<label class="control-label" for="trackers">Choose Tracker</label>
<select id="tracker" name="tracker" ng-model="tracker" ngOptions="tracker.Tracking.description for tracker in trackers" class="form-control custom-input tracker">
<option>Select Tracker</option>
</select>
</div>
</div>
With the above, I get this in the DOM
<select id="tracker" name="tracker" ng-model="tracker" ngoptions="tracker.Tracking.description for tracker in trackers" class="form-control custom-input tracker ng-pristine ng-valid">
<option value="? undefined:undefined ?"></option>
<option value="Select Tracker">Select Tracker</option>
<!-- Load options -->
<!--<option value=""></option>-->
</select>
I also tried using ng-repeat with the same result, so I am guessing the JSON format is incorrect..
Any help is greatly appreciated since I am baffled with this as it seems pretty straight forward.
Kindly excuse my ignorance but i'm new to angular.
try this
<div class="row" ng-controller="trackerCtrl">
<div class="col-md-4">
<label class="control-label" for="trackers">Choose Tracker</label>
<select id="tracker" name="tracker" ng-model="tracker" ng-options="tracker.Tracking.description for tracker in trackers" class="form-control custom-input tracker">
<option>Select Tracker</option>
</select>
</div>
</div>
ngOptions vs ng-options?
<select
id="tracker"
name="tracker"
ng-model="tracker"
ng-options="tracker.Tracking.description for tracker in trackers"
class="form-control custom-input tracker"
>
I'm not sure if both notations are supported, never used the one without the dash. Try it.
If that doesn't work I guess the expression in ng-options is wrong. See the documentation.

Categories

Resources