HTML
With ng-model - Not working
<input type="text" ng-model="Event.Sponsor.Amount" name="donationAmount" placeholder="{{PlaceHolderOther}}" required />
Without ng-model - Working
<input type="text" name="donationAmount" placeholder="{{PlaceHolderOther}}" required />
JS
$scope.PlaceHolderOther = "$50.00";
Could you tell me why placeholder is not working with ng-model ? It's working fine without ng-model.Thanks in advance.
Out put (When it runs)
<input type="text" name="donationAmount" placeholder="$50.00" ng-model="Event.Sponsor.Amount" required="" class="ng-pristine ng-valid ng-valid-required">
It shows the placeholder value properly.But not display it to the user.Why ?
UPDATE : I have found out the issue.That is texbox has been initialized automatically.When we remove that value then it shows the placeholder value.So how to avoid this by default ?
Try data-ng-model, refer to http://jsfiddle.net/pranav93/ww3k4hxp/6/ .
Something like,
<input id="ship-address-line-3" name="ship_address_line3" placeholder="{{shippingFormOrderItemAction.ship_address_line3}}" data-ng-model="retryAutoDetails.ship_address_line3" type="text">
Did you defined
$scope.Event = {};
Try above with.
Yes: updated answer according.. (typo mistake corrected)
Related
Added this input field in my html file.
<input type="number" ng-model="kita" />
but ng-model is only update when i move mouse out off input field, is there i way to update model immediately,
tried
ng-model-options="{updateOn: 'mouseover'}
not sure whats going on please any help. Not sure where this behaviour is set, or what causing this?
You can try doing like the below code, also please check this plunker for the example scenario.
Template:
<input type="number" ng-model="kita" ng-mouseover="changeKita()" />
<input ng-model="name" ng-model-options="{updateOn: 'mouseover'}">
{{name}}
Controller:
$scope.kita = 1;
$scope.name = "Test Data";
$scope.changeKita=function(){
$scope.kita=$scope.kita+1;
}
I am pretty new with Angular 4 and I have probably basic question for someone who is a bit more experienced than me.
I have input field which value needs to be populated when object user exists.
So basically I need php function isset() in angular 4.
I tried like this but it is not working.
<input class="form-control" type="text" value="{{ !!user.firstname ? user.firstname : null }}" id="firstname">
Any help would be appreciated.
Tnx
You should use [(ngModel)] with input and use elvis operator to check if the user exists or use *ngIf
<input class="form-control" type="text" [(ngModel)]=user?.firstName id="firstname">
Try this :
<input class="form-control" type="text" [value]="user.firstname ? user.firstname : null" name="firstname" id="firstname">
I am using ng-repeat and I am various levels in such as:
`ul in output.content.innercontent` or `li in ul.content.innercontent`
my input looks like this:
<input id="{{input.key}}" name="{{input.label}}" type="text"
value="{{input.value}}" placeholder="{{input.defaultValue}}"
value="{{input.label}}"
class="form-control input-md" uib-tooltip="{{input.tooltip}}"
ng-if="input.type == 'input'">
On any one of those whenever a change happens and then an onBlur I want to make a call. Is this possible with ng-model & ng-model-options="{updateOn:'blur'}" with all these fields? The bind behavior I see online are mostly of an input to read-only field somewhere. Should I use ng-blur followed with a on("change") type of behavior?
try with
<input id="{{input.key}}" name="{{input.label}}" type="text"
ng-model="{{input.value}}" <!-- this -->
placeholder="{{input.defaultValue}}"
class="form-control input-md" uib-tooltip="{{input.tooltip}}"
ng-if="input.type == 'input'">
ng-model should do it
<input ng-model-options"{updateOn: 'blur'}"/>
==> This update the model only when user get outside the input
To call a function on-blur :
<input ng-blur="callThisFn()"/>
I want to only set my attribute of ng-minlength when the value I parse from data.Validation['minlength'] is not nil.
First I attempted using ng-switch; I had no problem doing this when handling ng-show=true/false. However I was unable to get it working when it was beyond just the value but also the whole declaration of ng-minlength="...". Second attempt was using ng-if but again I was unable to get it working in the "middle" of the input.
Below is some code that works - I want the whole ng-minlength="data.Validation['minlength']" to only be set if the value is not nil.
<input type="text" name="foo" ng-model="item.foo"
ng-minlength="data.Validation['minlength']" required/>
I discovered a simpler approach in another question of mine.
Solution by Karaxuna here.
<input type="text" name="foo" ng-minlength="myvar || 0" required/>
You can try ng-switch-on
<span ng-switch on="data.Validation>
<input ng-switch-when="null" type="text" name="foo" ng-model="item.foo" ng-minlength="data.Validation['minlength']" required/>
<input ng-switch-default type="text" name="foo" ng-model="item.foo" required/>
</span>
It will create input depending on data.Validation values
However I am not sure if it will work with NULL values. It is still a good way forward.
Hi I have following issue which seems easy and should work but is not.
In my code I have input
<input type="text" ng-model="c.Id" ng-init="c.Id={{pId}}"/>
When I look at the DOM using firebug tool I see the value
<input type="text" ng-model="c.Id" ng-init="c.Id=6"/>
But it wont display 6 in the input box neither I can access it using #scope.
Please let me know what is wrong here and how to fix it so that ng-model can have from ng-init.
Thanks
Get rid of the braces in the expression so that it will evaluate pId directly from the scope
<input type="text" ng-model="c.Id" ng-init="c.Id=pId"/>
Plunk
ng-inittakes an expression and therefore you do not need the curly braces:
<input type="text" ng-model="c.Id" ng-init="c.Id=pId"/>
Assigning the value to ng-model using ng-value
<input type="text" class="form-control" ng-model="inputPrice" />
<input type="text" ng-model="newPrice" ng-value="newPrice=inputPrice" />