AngularJS - ng-model not working with bootstrap directives - javascript

I am using AngularJS for my project and I am new to it. But I liked its features and very convenient for development as well. But I came up with the following issue and didn't know to get out of it.
I have a multi view application. The following code is a part of signup view. This view gets displayed when the signup button is pressed. Now the issue is, in the 4th and 5th line below, I have attached a ng-model attribute to and I am able to print the number obtained using {{num}} directive. However, the ng-model num2 below is not getting displayed as above. All I get is the static text {{num2}} being displayed. Why is it not working like the previous case?
<form role='form' action='#/app/register_db' method='post'>
<h1><small><b>Sign Up Information<b></small></h1>
<br>
<input type='text' ng-model='num'>
<h1>{{num}}</h1>
<div class='row'>
<input type='text' ng-model='num2'>
<h1>{{num2}}</h1>
<div class='col-xs-5'>
<input type="text" class='form-control' id="fn" name='firstname' ng-model='ng-firstname' placeholder="First Name">
</div>
</div>
...
...
I am new to AngularJS and I am very quickly grasping concepts. So if I am missing something, then please guide me through the right path and help me fix this issue.
I am using angularJS and Bootstrap CSS.
Thanks.

You should get the following error message in your browser's console:
[ngModel:nonassign] Expression 'ng-firstname' is non-assignable. Element: <input type="text" class="form-control" id="fn" name="firstname" ng-model="ng-firstname" placeholder="First Name">
As ng-model="ng-firstname" is not a reference by name, but an expression AngularJS will try to evaluate, so simply not using a dash will fix that. What happens when you break the code there is AngularJS basically stops, and anything else AngularJS would usually do in elements that follow, simply doesn't happen.

Related

How to make a ng-change listener limited to a specific dom?

In short: Need an AngularJS solution where the change-event callback for data/property changes in a model only works within a certain DOM and not the whole scope/template controller by a controller.
Detail: I have a template controlled by a controller. The properties of a model (there are lot of properties ) can be edited from different sections within that template. I need a smart but simple way to know from which section the model is being modified by the user, typically invoking different method for different section.
I know the lengthy solution of adding ng-change in each of the model-property input field, but instead can it be smarter by adding some custom ng-change/directive of a particular section container (div)? I tried adding a custom directive in a section that listens for change in that model, but that also fires when the model is modified outside of that section.
Here is the code excerpt :
<div class="profile" object-change-listener object="user" callback="didChangeProfile()">
<label>First name:</label>
<input type="text" ng-model="user.firstName">
<br>
<label>Last name:</label>
<input type="text" ng-model="user.lastName">
<br>
</div>
<div class="settings" object-change-listener object="user" callback="didChangeSettings()">
<p><b>Settings</b></p>
<label>Fav Color:</label>
<input type="text" ng-model="user.favColor">
<br>
<label>Fav Number:</label>
<input type="text" ng-model="user.favNumber">
</div>
Here is the codepen to explain the scenario : http://codepen.io/tusharbhatta/pen/dXBLPG of what I'm trying to achieve, but both section's callback function fires, even if I change one section.
Appriciate any help or pointer.

AngularJS: ngMessage weird behavior with input with type "email"

I follow Moving from ngModel.$parsers /ng-if to ngModel.$validators /ngMessages article from Todd Motto's blog and I want to migrate from ng-if to ng-messages. But ng-messages directive behaves very weird when I try to display to user two different messages for <input type="email">: first, when user leave field empty (then required error occurs) and second, when format is wrong (then email error occurs) - it displays both required and mail messages, but my old code displays only one message - about required error - and that is I think welcomed behavior. Here is simplified code:
<form name="ngMessageMailForm">
<input type="email" required="" name="email" ng-model="ctrl.ngMessageMail" />
<div ng-messages="ngMessageMailForm.email.$error" ng-if="ngMessageMailForm.email.$touched">
<span ng-message="email">
E-mail has not proper format<br />
</span>
<span ng-message="required">
E-mail is required<br />
</span>
</div>
</form>
Comparison between old and new code you can find in this Plunker: Ng-if vs ng-messages at plnkr.co, to reproduce weird behavior of ng-message click inside and then outside of mail inputs. You will see one message in case of ng-if form, and two messages in case of ng-message form.
Did I miss something while migrating from ng-if to ng-messages? Thank you in advance for any help.
Everything is fine but you miss to add angular-messages library to your project...
Add its files to your project and inject ngMessages to your angularjs module then you are good to go...
here is update plunker

angular, validate single input (not inside form)

I am trying to validate a single input to check numbers 1-99, I am wondering if I can do this in angular without having it wrapped in a form. Not a problem if it needs a form, just curious if it has to have it. Here's what I'm attempting -
<div class="errorMulti" ng-show="multiAdd.$error.maxlength">Error</div>
<input type='text' ng-model="multiAdd" placeholder='Number of levels to add 1-99' ng-maxlength="2">
Pretty straight forward, but doesn't seem to work. Any insight? thanks!
<div ng-app>
<form name="myform">
<div class="errorMulti" ng-show="myform.multiAdd.$error.maxlength">Error</div>
<input type='text' name="multiAdd" ng-model="multiAdd" placeholder='Number of levels to add 1-99' ng-maxlength="2">
</form>
</div>
Check the JSfiddle: http://jsfiddle.net/15ugz6j3/

Can't assign a new value to my autocomplete box

I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);
It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.

Angular.js: update binding after manual modification

I'm only starting to dive into angular.js and have found this issue that I can't seem to get around. Consider this simple code:
<input type="text" ng-model="test">
<input type="text" value="{{test}}">
When I write in the first field, the second one is updated nicely. When I write in the second field and then go back to the first one, the binding is not updated anymore. Interestingly though, the HTML attribute value does get updated - it's just not displayed.
Equivalent (at least roughly) code in vanilla javascript does not suffer from this:
<input type="text" id="model">
<input type="text" id="binding">
<script>
var model = document.getElementById("model");
var binding = document.getElementById("binding");
model.addEventListener("keyup",function() {
binding.value = model.value;
});
</script>
Here's a fiddle for you to test both: http://jsfiddle.net/Q6b5k/
Any idea why this happens when using angular.js and how to fix this?
[EDIT] Judging by the initial replies, it appears I have not made it clear. I do not want the second field to update the first one. The binding is to be one-way only, e.g. to allow filtering or even manual corrections (such as automatic creation of a URL alias in a blog post creation form). http://jsfiddle.net/Q6b5k/1/
The value attribute is only used when rendering the initial HTML. After the page load, everything else happens in the Angular Event Loop and therefore you need to do something that event loop can pick up. You can use ng-change for what you are looking to do:
<input type="text" ng-model="test" ng-change="test2=test.toLowerCase();" />
<input type="text" ng-model="test2"">
This happens because {{value}} does not create a binding, it is used for interpolation.
The simplest solution is to use ng-model in both the fields
<div ng-app>
Angular.js:<br>
<input type="text" ng-model="test">
<input type="text" ng-model="test">
</div>
Demo: Fiddle

Categories