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" />
Related
I would like every character entered into my HTML input box to get uppercased. Here's the approach I am trying using the latest Alpine.js available via CDN.
<input
x-data="{myText: '' }"
x-text="myText" type="text"
#keydown="myText.toUpperCase();"
name="myText"
placeholder="Some Text"/>
This seems to have zero effect. What's the right way of doing solving this problem?
There are a couple of things going on. First of all, you're binding to keydown but not assigning your uppercased value to any reactive property. Second is that you probably want to use x-bind:value.
<input
x-data="{myText: '' }"
type="text"
#keyup="myText = $event.target.value.toUpperCase()"
:value="myText"
name="myText"
placeholder="Some Text"/>
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)
am a newbie to angularJS and Thymeleaf and am experiencing some weird conflict.
This is what I have below
<input type="text" th:field="*{unit}" value="{{unit.unitID}}" class="unit_value"/>
Whenever the template is resolved and displayed in the browser, the value is set to empty as in something like this
<input class="unit_value" type="text" value="" id="unit" name="unit" />
am not having the angularJS expression in the value anymore.
I know the expression is synonymous to that of thymeleaf, I really dont know how to solve this.
I have searched everywhere but cant get a solution.
The Solution I found is to literally bind the tag yourself and releave thymeleaf from binding it that is just put in the expected generated html that thymeleaf will generate
<input type="text" name="unit" value="{{unit.unitID}}" class="unit_value"/>
And everything works fine.
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.
I have a problem with a form in angularjs.
Example with classic html & php
<form name="myForm" action="post.php" method="post" autocomplete="on">
<input name="namename" type="text" />
<input name="email" type="text" />
<input name="submit" type="submit" value="submit" />
</form>
which works as expected. On the second visit, after i submitted the form for the first time, i just need to type the first letter and the input field will suggest something based on the first post.
The same form in angular.
<form name="myForm" ng-submit="test(user)" autocomplete="on">
<input name="name" type="text" ng-model="user.name" autocomplete="given-name" />
<input name="email" type="text" ng-model="user.email" />
<input name="submit" type="submit" value="submit" />
</form>
On the second visit here the form will suggest nothing at all, which is very irritating.
Is there any fix for that?
Example
thanks in advance.
That behaviour you're describing is done by the browser and is not guaranteed to work in all situations. It's actually quite easy to do in AngularJS; just keep track of a shared state object. This can be done in several ways, the most easiest by using the value provider like this:
// Create an injectable object with the name 'userInput'
angular.module('myApp').value('userInput', {});
Now inject this object in the controller that is handling the form like this:
angular.module('myApp').controller('MyController', function($scope, userInput) {
// Assign the state object to the scope so it's available for our view
$scope.user = userInput;
});
Render the form as you did and you'll see that the state of the form is kept. In fact, this is one of the hidden gems when programming with Angular since it allows you to keep very complex state information, which was previously pretty impractical.
Live demo can be found in this plunker.
Edit
One way to get the autocomplete to work is to maintain datalist elements. Just store the previous entered values in an array and use a ng-repeat to render all the options. Associate the input element with the datalist using the list attribute and you'r good to go.
<input list="nameHistory" type="text" ng-model="user.name" />
<datalist id="nameHistory">
<option ng-repeat="item in userHistory.name" value="{{ item }}"></option>
</datalist>
Live demo can be found in this plunker.
Just add to the input tag this attribute autocomplete="off"