I am learning Angular.js and i've come to a problem that should probably be simple, but I can't seem to find an answer on.
I want to create form inputs with the value of "connectedTeams", like this in html:
<input type="text" name="connectedTeam[]">
<input type="text" name="connectedTeam[]">
<input type="text" name="connectedTeam[]">
I have tried the following in angular...
<input type="text" name="connectedTeams[]" class="form-control" ng-model="user.connectedTeams">
...but it is binding the same value to all 3 inputs. I know in my mind that this makes sense, but I can't seem to figure out how to tell it that ng-model is user.connectedTeams.[] (user > connectedTeams > add to an array.
I hope this makes sense enough for someone to provide a quick answer.
ng-model="user.connectedTeams[0]"
ng-model="user.connectedTeams[1]" and so on
You can put it in a ngRepeat, so you don't need to repeat your code like above.
FYI, name is only used for validation in Angularjs.
Related
I use a bootstrap modal for a form in my code.
So, I need standard-values for two textfields, and I tried to simply use VALUE like
<input type="text" value="myStandardText" ng-model="something">
I think it's because of the ng-model, but why?
And do you know a way to get the same result as with value, too?
(For now, I use "placeholder" instead, but value would be better)
UPDATE: Ok, i got a step closer.
<input type="text" ng-model="e_uname" ng-init="e_uname = 'a std txt'">
does the trick, but i need now to set a saved value as init-value.
i added "uname" to my scope, but with input it doesn't work.
<input type="text" ng-model="e_uname" ng-init="e_uname = {{uname}}">
I tried also with different quote marks. Any ideas?
Ok guys, I found the answer.
Final solution is:
<input type="text" ng-model="e_uname" ng-value="uname">
I'm thinking of a good way to implement ng-required.
Let's say I have a bunch of inputs with ng-required in my app.
<input type="text" id="one" />
<input type="date" id="two" />
<input type="radio" id="three" />
<input type="checkbox" id="four" />
I would like to do something in a controller, where I could pass an array of required fields. I'm thinking that if I made an array of elements such as:
var myEl = angular.element( document.querySelector( '#some-id' ) );
and some how set the required property that way.
I write a directive which would decide from an array if the field is required, if it does not exist in the array, it's not required if it does, it's required.
Ultimately, I would like to have an array that allows passing of fields in such a way:
var reqArray = ('#id', ('#id1' || 'id2')) etc.
Works the same as conditional logic operators:
#id is required
#id1 || #id2 is required, but not both.
Not sure where to begin, or if it's feasible in Angular.
This would make it easier to modify required fields in large applications without having to modify the actual html.
It can be done, but angular already provides its own ways to validate forms. Some brief details:
The form tag must have a novalidate attribute in order to prevent HTML5 validation. <form name="myForm" novalidate>
With that, now angular can take charge of the validation by adding a "required" attribute to your inputs <input ng-model="myModel" type="text" required>
By this point, angular has taken control of your validation, it can also validate other HTML5 attributes like pattern. <input pattern="[0-9][A-Z]{3}" type="text" title="Single digit followed by three uppercase letters."/>
I suggest you take look at this official guide (also take a look at the directives guide on that same site, I wanted to link it but I don't yet have the rep).
That being said, what you are trying to accomplish is also possible, but rather redundant since you would have to add an attribute to your inputs anyway (the directive, and angular is able to validate already) and also require ngModel in the directive.
I made this plunkr to show you how to do it, but take notice of the extra work needed in order to validate something that angular already does natively, I'd leave this kind of work for expanding on validations, like comparing items or models.
Also, querying a selector directly like in your suggestion is not considered "the angular way". A better way would be to add the directive to your form element and access the element through the 'element' parameter in the directive.
Hope this helps.
So I have the following view:
<p type="text" disabled='true' class="form-control" >
{{selected.timerange}}
</p>
The value of $scope.selected.timerange is:
{"available":false,"schedule_start_at":"2015-03-13T00:30:00","schedule_end_at":"2015-03-13T01:00:00"}
This works fine, but when I use the following view:
<p type="text" disabled='true' class="form-control">
{{selected.timerange.schedule_start_at}}
</p>
the interpolation does not happen.
I'm unable to figure out why. Any help please?
Your example works if you correctly set up angular. See fiddle
Make sure that :
The controller that is responsible for the second view is the same instance that the one responsible for the first view. If you instantiated the controller with the ngController directive, the instantiation should be on a common parent for both views.
By the way, please note that boostrap form-control class is usually for input elements, not for paragraphs.
Consider replacing :
<p type="text" disabled='true' class="form-control" >
{{selected.timerange}}
</p>
with :
<input type="text" disabled='true' class="form-control" value="{{selected.timerange}}"/>
Late to the party here but in case anyone else runs into this issue:
Try initializing your timerange variable in the constructor.
this.selected.timerange = {} if that doesn't work go one step deeper
this.selected.timerange.schedule_start_at = "" (keeping the init from above)
Not sure the philosophy behind this, but I guess it has something to do with observables and/or promises if thats how you're getting your variables ( that was the issue in my case at least )
I'm giving an student scenario as example.
Assume I have the below scope variables that needs to populated when I select a id.
$scope.student.name;
$scope.student.address;
$scope.student.city;
$scope.student.zip;
The sample html below.
<input type="text" ng-model="student.id"/>
<input type="text" ng-model="student.name"/>
<input type="text" ng-model="student.city"/>
<input type="text" ng-model="student.address"/>
<input type="text" ng-model="student.zip">
In a regular jQuery, I would write on change and trigger. But how do I achieve this in angular way.
I might want to have the entire db values in a hashmap of <studentid,List<studentdetails>> and use this hashmap values to be populated on the respective fields.
I know this is probably a little late on the draw to answering this question, but I was searching for an answer to auto-population with Angular today and found that you could populate an input using ng-value and passing it into your value held inside of {{}}.
It would look something like this: ng-value="{{exampleValue}}
Hope this helps.
I have already solved this problem, but it took me a while to realize what I did wrong. It's a very simple mistake, but I figured I'd post it here in hopes I can save someone else some work in case they run across the same mistake.
I was trying to use simple Angular validation to set a class on an input field based on whether it was valid. I failed to realize it wasn't working because I specified the name of my form with ng-form. So using $scope.form or the actual value of name attribute of the form did not work. Of course, the examples below are simplified and a much larger form could make this mistake much harder to recognize.
Here is a failed example:
<form name="myForm" ng-form="form1">
<input type="text" name="myField" ng-class="error: myForm.myField.$invalid"/>
</form>
Here is a successful example:
<form name="myForm" ng-form="form1">
<input type="text" name="myField" ng-class="error: form1.myField.$invalid"/>
</form>