I am trying to make an input field a drop-down list as well. I have seen a few examples of what to do but yet when I mimic them I still have 2 separate fields for the data to go. I also have a problem with the datalist not displaying properly. Any ideas or routes to try would be greatly appreciated.
<div class="input-group">
<label class="input-group-addon tc-group-addon" data-translate="" title="{{$tcore.tcoreTranslations.TRANSLATIONS.elementList.ThinClient_TIS.translation_184}}">
TRANSLATIONS.elementList.ThinClient_TIS.translation_184
</label>
<input list="valueLists" ng-model="vm.selectedValue" class="form-control tc-tis-form-control" ng-change="vm.changeValue()" ng-disabled="vm.readOnly">
<datalist id="valueLists" ng-model="vm.selectedValue" class="form-control tc-tis-form-control" ng-change="vm.changeValue()" >
<option ng-repeat="item in vm.valueList" value="{{item}}">{{item}}</option>
</datalist>
What I am trying to mimic is this functionality where you can type inside the box or you can choose a predetermined value I want to mimic this
Related
I'm trying to get select-box to start off with a pre-filled option using ng-repeat with AngularJS
I have read a lot of articles using ng-options instead of ng-repeat, but I want to use ng-repeat for this case. Since the same HTML code is working for other pages I would like to keep it that way.
Since I am new to angular I am not quite sure why it's working in some pages and not on others
Here's the HTML:
<select id="subject" name="subject" class="form-control required" ng-model="ToDoProp.BMW">
<option value="">Choose One:</option>
<option value="{{item.Title}}" ng-repeat="item in bmwProp | orderBy:'Title' track by $index"> {{item.Title}}</option>
</select>
How ever this code is injecting
<select id="subject" name="subject" class="form-control required ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="ToDoProp.BMW"><option value="? string:value ?" selected="selected"></option>
after investing so much time in reading articles I am still not able to figure out the problem. Please help..!!
I have input text box to filter items from a dropdown Select list.
This works fine.
But there are two problems.
When data gets populated i want 1st item to be visible in dropdown.
As i type in filter box first matching among the list should be displayes in the dropdown control.
How do i achieve this?
<input type="text" id="fromSearchBox" class="form-control w-auto h-25"
ng-model="SearchEmployee" />
<select class="form-control" ng-model="fromManagerInfo">
<option ng-repeat="emp in employees|filter:SearchEmployee">
{{emp.EmployeeInfo}}
</option>
</select>
You can set the selectedItem using ng-model on ng-init
<input type="text" ng-init="SearchEmployee = employees[0]" id="fromSearchBox" class="form-control w-auto h-25" ng-model="SearchEmployee" />
and for filter you are already using the filter
I'm experiencing a problem whereby the validation messaging doesn't seem to be firing for the below input. The appearance of this input is entirely dependent on another input (i.e. only show if they're still at school). What I've noticed is that, when I remove the ng-if regarding the display of this input, the validation messaging is fine and happens straight away. When ng-if is present however, it only shows the message if the value selected is invalid when ng-if has been satisfied. Any ideas?
HTML
<div ng-if="showSchoolLeavingYear()">
<label for="ddlSchoolLeavingYear">School leaving year:</label>
<select name="schoolLeavingYear" id="ddlSchoolLeavingYear" ng-model="session.form.schoolLeavingYear" required>
<option value="">- Please select -</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<div class="ng-hide" validation-message field="schoolLeavingYear">Please select your school leaving year.</div>
</div>
If the ng-if asserts to false it removes the entire <div> from the DOM. Use ng-show so that the validation on those input fields still happens. Furthermore you need to close the <div> tag of the ng-if/ng-show so that it does not aply to the nested "error message div" like so:
<div ng-show="showSchoolLeavingYear()">
<label for="ddlSchoolLeavingYear">School leaving year:</label>
<select name="schoolLeavingYear" id="ddlSchoolLeavingYear" ng-model="session.form.schoolLeavingYear" required>
<option value="">- Please select -</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</div>
<div class="ng-hide" validation-message field="schoolLeavingYear">Please select your school leaving year.</div>
I have a form with input fields generated with an ng-repeat. The field names are set dynamically from the model. I cannot get validation to work.
Here is the input field that is repeated within ng-repeat:
<input class="form-control input" type="number" id="item.id" name="item.name" ng-change="ctrl.updateSub(item)" ng-model="item.qty" max="item.maxqty" min="0">
I am trying to validate against the max value, which is also set dynamically.
What I cannot find anywhere is how to set the name within the ng-show classes.
<div class="col-sm-2 error" ng-show="form.{{item.name}}.$invalid">
<small class="error" ng-show="form.{{item.name}}.$error.max">
You exceeded the maximum allowed
</small>
</div>
How am I supposed to handle the {{item.name}} bit?
Thanks in advance for any help or pointers.
Angular 1.3.12
Firstly form is a reserved keyword, you cannot use that as your form name.
Coming to your problem, unfortunately as of right now it is not possible to generate dynamic names for form inputs.
You can achieve what you want with the help of ng-form
Have a look at this example :
<form name="yourForm" >
<div ng-repeat="field in fields" ng-form="myInnerForm">
<input type="text" name="dynamic_input" ng-model="field.name"/>
<div ng-show="myInnerForm.dynamic_input.$dirty && myInnerForm.dynamic_input.$invalid">
The field is required.
</div>
</div>
</form>
I have created an opportunity page layout in SalesForce.com and it is working fine. I have a situation where I need to add Airline information. I have created three fields and added these to the opportunity one by one; the HTML look like this:
<p>
<label>
<span>Airline 1:</span>
<span style="margin-left: 120px;">Airline 2:</span>
<span style="margin-left: 120px;">Airline 3:</span>
</label><br>
<input type="text" style="width: 150px;" class="text small" id="txtAirline" value="" name="txtAirline">
<input type="text" style="width: 150px;" class="text small" id="txtAirline2" value="" name="txtAirline2">
<input type="text" style="width: 150px;" class="text small" id="txtAirline3" value="" name="txtAirline3">
</p>
<p>
<label>
<span>PNR 1:</span>
<span style="margin-left: 130px;">PNR 2:</span>
<span style="margin-left: 130px;">PNR 3:</span>
</label><br>
<input type="text" style="width: 150px;" class="text small" id="txtPnr" value="" name="txtPnr">
<input type="text" style="width: 150px;" class="text small" id="txtPnr2" value="" name="txtPnr2">
<input type="text" style="width: 150px;" class="text small" id="txtPnr3" value="" name="txtPnr3">
</p>
Now, instead of adding filed for Airline and PNR again and again, I would like to add an "Add more" link which would create a clone of both fields and add it below one by one.
Is this possible?
The problem will be with binding. It would be fairly easy to write some Javascript that would do exactly what you want when they click a button but how will that data get back to the controller?
Perhaps you can try the following:
Create a custom object for the airline information. It can have whatever info you need. It will need to be tied to the Opportunity object via a relationship field (perhaps a Master-Detail type). In your opportunity you can then add a related list of airline information. MAke sure you add the airline info as part of the Layout. SFDC will handle most of the UI for you at that point - so it won't look exactly as you have it set up - but it will do what you want to do.
I would handle this in the way that Ryan Describes, Create a custom object called "Airline" or something along those lines, create extra fields if required and add a lookup to Opportunity, this will create a related list on Opportunity which you can customize to show the fields that you require.
I assume that PNR is Passenger Name Record and you are recording passenger names, not sure if you can put this on the same airline object or if you need another object. You also might want to consider using Leads.