I have a dropdown which has elements of more characters. In order to display it in the dropdown I have to decided to add 3 dots as it has more characters.
When I come back to edit the value of dropdown (logout and login and try to edit), the text is overlapping with dropdown symbol.
(Wrong tick mark in img)
<div style="margin-top:3.2px;" class="shortdropdownContainer weak">
<div class="selectdivshort weak" style="display;none">
<label>
<select class="chooseCoun ng-pristine ng-untouched ng-valid"
ng-init="init()"
data-ng-model="selectedType"
data-ng-options="x.value for x in businessType" >
</select>
</label>
</div>
<p id="dropdownmessage" class="editCorporate weak">
{{selectedType.value}}
</p>
</div>
currently the code looks like above.
I want dropdown to act in the same way even if i come back to edit mode.
dropdown should look like (Right tick mark in img).
Related
I'm hoping angularjs ng-options can allow a user to enter a new value / option or edit an existing one in-situ
Is this possible? or is there a way to do so?
My code:
<div class="col-md-2">
<select class="form-control"
ng-model="BatchNos.Selected"
ng-options="item.BatchNo for item in BatchNos track by item.BatchId"
style="background-color:dimgray;font-weight:Bold;color:white">
</select>
</div>
yes you can add an option textbox inside it and input type submit and finally when clicked on submit, you can add the item to the BatchNos
Angular and Ionic Application
I have a form that has a lot of <select> elements, The form offers the user to select from a list or if the <option> = 'Other' then I show another <input> to enter the value. I then save the value to another ng-model.
<select data-ng-model="minor.tests.liveEarth"
name="minorTestLiveEarth"
required>
<option></option>
<option>>200</option>
<option>>299</option>
<option>>500</option>
<option>>1000</option>
<option>Other</option>
</select>
</label>
<label class="item item-input item-stacked-label" ng-show="minor.tests.liveEarth === 'Other'">
<span class="input-label">Please Specify</span>
<input type="text"
placeholder="live earth other"
ng-maxlength="10"
data-ng-model="minor.tests.liveEarthOther"
name="minorTestLiveEarthOther">
</label>
I originally used <datalist> but doesn't show up on iOS.
I assigned the liveEarthOther to the same as the <select> liveEarth but it has 'Other' assigned to the ng-model, which then the user has to delete the input value Other before entering their value.
I have looked for a combobox kind of control but haven't found one that works properly.
How could I make this into a directive or any thing suitable that could perform the renaming without the user having to delete the value.
I want to use this functionality many times in the application I am building.
You may have overcomplicated things by re-using the ngModel. If you change the value minor.tests.liveEarth you'll mess up your select because anything other than the given values will cause nothing to be selected. But if you don't change minor.tests.liveEarth then you'll have to delete it when the user fills in the text input. This would then also mess up the select box!
What I would do is record the value of the text input to a different variable. Keep the ng-show="minor.tests.liveEarth === 'Other'" as it is, but change your input to
<input type="text"
placeholder="Fill in your other live earth"
ng-maxlength="10"
data-ng-model="tempVar" />
This way the input will be still be recorded, but the select won't be messed up on the ngModel change. Due to the placeholder, the user will know that they have to fill in the text box.
In your js, you'll have to create a validating function when the form is submitted along the lines of:
var validateLiveEarth = function(){
if(minor.tests.liveEarth === "Other"){
//check that tempVar meets validation
//assign tempVar to whatever form you're sending
}
}
I'm using the getbootstrap typeahead to populate an input value. I've setup everything so that the user has to pick something from this list:
<input type="text" class="form-control" id="birdname" ng-model="birdname" required ng-disabled="checked" autocomplete="off" placeholder="Check the box if you don't know!"
uib-typeahead="bird for bird in birds | filter:$viewValue | limitTo:8" typeahead-no-results="noResults"
uib-tooltip="Pick a bird or check the box if unsure!"
tooltip-placement="top-right"
tooltip-trigger="mouseenter"
tooltip-enable="!birdname">
</div>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found - Please Try Again!
</div>
As you can see, the user has to pick something from this list or the validation won't allow it, though I am having one issue: If the user starts typing and is typing a birdname that exists (list showing with birds on input), but then clicks out of the input with his mouse. typeahead accepts this as 'correct' even though the full name hasn't been picked.
Is there a fix to this?
If you didn't understand what I mean, the following picture should hopefully explain it:
Is there a solution to this? For example, it picking the first option in the list when clicked?
How can I mimic the tags box behaviour from SO in AngularJS? I'm trying to do something kind of similar where the user enters a set of space/comma-delimited words and as each one is typed I want to parse it out and put it into an array. I know there are probably 30 different ways to do this with bespoke javascript but I'm looking to leverage AngularJS in the most efficient way possible here.
At the moment I have an ng-model based on the input field and I'm doing an ng-repeat to create spans containing each tag, but angular uses commas as the delimiter and it also includes partially-formed words. So I only want to include words that have been delimited by the space/comma and I want to put them into an array so I can perform some validation on each one as it's entered, see below.
<form role="form" class="form-inline" data-ng-submit="updateScore()">
<input data-ng-list data-ng-model="labels" placeholder="Enter labels" class="form-control" type="text" >
</form>
<span data-ng-repeat="label in labels track by $index">
<span class="badge">
{{ label }} 5 <span class="glyphicon glyphicon-remove-sign"></span>
</span>
</span>
Any ideas?
Figured it out actually...
<input data-ng-list="/[,\s]/" data-ng-model="labels" placeholder="Enter labels" class="form-control" type="text" >
I am trying to write custom validation on drop down which is mandatory.
I need to impose certain condition based on the values selected by user. If my condition fails I will make field invalid and display error message to user that selected value is invalid.
I have tried to write the following code but not sure where to write method to check condition.
<div class="form-group" data-ng-class="{'has-error' : myForm.duration.$invalid}">
<label for="durationOfclass">Duration</label>
<div class="col-sm-4 col-md-3">
<select name="duration" class="form-control" data-ng-required="true"
data-ng-model="durationOfclass"
data-ng-options="h.name for h in availableDurations()">
<option value="">-- Välj --</option>
</select>
</div>
<label class="text-danger" data-ng-show="myForm.duration.$error.isValid" for="imei">Selected value is invalid</label>
</div>
Can some one help me.
I'd recommend either including, in your controller, $rootScope.$watch('object', validate) (this is slow; the following option is better), or including this on the select:
<select ... ng-change="validate()">
Then, in your controller, $scope.validate would set or unset a flag, which controls whether the form 1. is displayed as valid and 2. is submittable, 3. whether the error message is visible.
Hope that helps!