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.
Related
Pretty new to accessibility in web but been tasked with improving a page so your guidance would be much appreciated.
I have an HTML select element with a few options and each option will either reveal some additional questions or just some information. Just wondering if these conditionally revealed content has to be in some way tied to the selected option so that screen reader will announce to the user that new content has appeared on the page? I read about aria-live for somewhat similar implementations but not entirely sure if this is needed here? Select element and subsequent content looks like below although the toggling functionality is not yet implemented.
.hidden {
display: none;
}
<label for="employmentType">Your employment type</label>
<select id="employmentType">
<option value="0">Full time</option>
<option value="1">Part time</option>
<option value="2">Fixed term contract</option>
<option value="3">Student</option>
<option value="4">Unemployed</option>
</select>
<div class="value-zero-content hidden">
This is some information
</div>
<div class="value-one-content hidden">
<label for="empName">Employer name</label>
<input type="text" id="empName">
</div>
<div class="value-two-content hidden">
<label for="contractStart">Start date</label>
<input type="text" id="contractStart">
</div>
Thanks in advance.
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
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>
I am using the below to code to get data in a list box.
<div class="form-group">
<label class="control-label col-md-6">Year Built</label>
<div class="col-md-6">
<select ng-model="property.yearBuilt"
id="yearBuilt"
rb-default-year="currentYear"
ng-options="year.yearFourDigit as year.yearFourDigit for year in years">
<option value="">--Select--</option>
</select>
</div>
</div>
But somoehow the data is not binding properly with html. I am getting blank list box 50% of the times.
Can anyone please help me in this?
I wanted to post a picture showing what I am seeing, but I don't have a 10 in reputation to be able to do that.
i got a html-dummy (http://www.gisa.de/formular_test/anmeldeformular.html) from another company and now i am trying to create a web-form (http://www.gisa.de/2359.html) based on that dummy.
i am using the same scripts, the basic structure is the same as the dummy, i've compared the sh** out of the code and found nothing. I found one thing with firebug: the site with the non-working select-block won't call the function custom_select from the script.js file - but why???
i hope someone will find a solution, or something that i've just overlooked
i made 2 jsfiddle out of it:
http://fiddle.jshell.net/WbXsv/1/
http://fiddle.jshell.net/95Q8P/1/
The code is not the same. On your page, you're missing two spans in your div select.
Your page:
<div class="select">
<select name="anrede" id="anrede" required="" class="input" style=">
<option value="0" selected="selected">bitte auswählen</option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
</select>
</div>
Their page:
<div class="select">
<select name="anrede" id="anrede" required="" class="input" style=">
<option value="0" selected="selected">bitte auswählen</option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
</select>
<span class="select-icon"></span>
<span class="select-box">bitte auswählen</span>
</div>
Adding those solved the issue.
You have:
.js select {
opacity: 0;
}
in gisa.css and custom_select function is adding custom html in place of hidden select.