I am very new to angular and i am trying to display several input boxes and then gather the inputs of the user for each. The number or id of the input boxes depends on a json and its dynamic. I am trying to create the structure in a ng-repeat but it only displays one input box when i define the field ng-model for it.
This is what i have so far.
<td ng-repeat="(key, value) in personType.requirements">
<label for="{{key}}">{{key}}:</label> <input type="text" id="{{key}}" value="{{value}}" ng-model="newReg.{{key}}"></td>
<td><button id='finalizePerson' ng-click="register(newReg)">Register</button></td>
You need to explicitly define the $scope.newReg = {}; to your controller scope.
And to use dynamic ng-model properties, try newReg[key] instead.
Related
I am trying to make comments functionality using Angular js. The problem is that when i want to write a comment for a post, the text is also writing inside other input elements (comments). I write a text inside one input, but it writes it in all inputs
So for example same is happening with this code
<div class="comments" ng-repeat="articles in [1,2,[4,5,6]]">
<div ng-repeat="comments in articles">
<div>
<input type="text" ng-model="$parent.new">
</div>
</div>
if i use new instead of $parent.new i get undefined, but when i use $parent.new and i write in one input, it also writes in other inputs.
The issue is that you are assigning all of the inputs to the same model, so your inputs are all in sync with the same object.
What you need is to assign each input to a different model. I'm guessing you need these models to be dynamic, so you should use an array as your model and track your ng-repeat by $index like so:
<div ng-repeat="comments in articles track by $index">
<div>
<input type="text" ng-model="arr[$index]">
<span ng-if="arr[$index]">
{{arr[$index]}}
</span>
</div>
</div>
Now, in your controller, you can initialize the empty arr like so:
$scope.arr = [];
Now, your inputs will be in sync with $scope.arr depending on the index they were in.
Try out this jsfiddle for an example.
This is because you've giving same model (ng-model="$parent.new") for all of the inputs What you should do to avoid this problem is assign different model to each input element. Something like
<div class="comments" ng-repeat="articles in [1,2,[4,5,6]]">
<div ng-repeat="comments in articles">
<div>
<input type="text" ng-model="comments">
</div>
</div>
Change ng-model of input to
<input type="text" ng-model="comments.comment">
jQuery, input elements with the same data attribute value but one is hidden, fill in same data on keyup.
I have 2 forms on a page with dynamically created form fields from a database via .NET MVC.
I have one form visible and one form that is hidden.
I know how to copy, on keyup, the values from one form field to another IF I have known element classes or Id's. This is not the case on dynamically created fields. I can not guarantee that all fields will come back in the same order in each form.
So what I did was I created a 'data' attribute and output the "Model.Name" on the input field. In my case I am lucky enough that the 2 forms have fields with the same "Model.Name" values. So I am able to do a match on that. But since the forms are built dynamically I need a few things to happen and I need some pointers.
I need to know how to copy field inputted values from the visible form fields to their matching hidden form fields with the same "data" attribute value. I won't necessarily know the actual data-attribute value since the input fields are getting created dynamically.
How would this work to get the matching form fields.
I have a basic JS Fiddle set up.
https://jsfiddle.net/mb91ktbg/6/
HTML
<!--I know the class of the wrapping form -->
<!--All data values are dynamic, so I don't know then on page load-->
<div class="masterFieldWrapper">
<!--Need to copy these input values to the sub field wrapper input values-->
<label>Field one</label>
<input type="text" data-myattribute="dynamicvalue" />
<label>Field Two</label>
<input type="text" data-myattribute="dynamicvalue2" />
<label>Field Three</label>
<input type="text" data-myattribute="dynamicvalue3" />
<!--I know the class of the sub field wrapper-->
<!--I would like to copy the inserted values from the parent wrapper fields to the sub field wrapper fields with the same data-myattribute value-->
<!--I can not assume the fields come back in the same order. This is why I need to use the data attribute value-->
<div class="subFieldWrapper">
<label>Field One</label>
<input type="text" data-myattribute="dynamicvalue" />
<label>Field Two</label>
<input type="text" data-myattribute="dynamicvalue2" />
<label>Field Three</label>
<input type="text" data-myattribute="dynamicvalue3" />
</div>
</div>
jQuery Started but not working. need some help please.
$(".masterFieldWrapper input").each(function() {
var fieldVal = $(this).val();
var fieldDataAttr = $(this).data("myattribute");
console.log(fieldDataAttr);
$(this).keyup(function() {
$(this).parent('.masterFieldWrapper').find(".subFieldWrapper input").data("myattribute").val($(this).val());
});
});
Don't know if this would help but, you could dynamically add a class or id to the element and then access like so:
$(".bodyWrapper").on("change", ".form-control", event => {
let value = $('.dynamicValueInput').val();
$('.dynamicValueInputCopy').val(value);
console.log(`body-input-has-changed`);
});
//Try this :)
var mainForm = $(".masterFieldWrapper");
var Input_type = $("input[type='text']");
var Totalinputs = mainForm.find(Input_type).length;
var Visible_inputs = Totalinputs/2;
var auto_fulfill = function(){
for(i=Visible_inputs; i<Totalinputs;i++){
Input_type.eq(i).val(Input_type.eq(i-Visible_inputs).val());
}
}
Input_type.keyup(function(){
auto_fulfill();
})
I am in the process of learning AngularJS (version 1) and want to convert a simple word game that I had previously written.
I have a partial HTML which will select a word from a dictionary (JSON file) and display it on screen. The word is saved in $scope as selectedWord. I now want to display an array of empty textboxes for the user to input their guess. The number of boxes to display will obviously be determined by the length of selectedWord and will be different for each game played.
The relevant HTML I need to produce for each letterbox is:
<input name="letters[]" class="answerbox" id="letter_1" onkeyup="testResults(this)" onfocus="this.select();" type="text" size="1" maxlength="1">
with the id incremented by 1 for each new box.
When selectedWord changes, create an array containing as many objects as the length of selectedWord, something as simple as
$scope.guesses =[];
for(var i=0;i<$scope.selectedWord.length;i++){
$scope.guesses.push({
value:''
});
}
Then in your template, use ng-repeat like:
<input type="text" name="letters[]" class="answerbox" ng-repeat="guess in guesses" id="{{'letter_'+$index}}" ng-model="guess.value" ng-keyup="testResults(guess)" ng-focus="this.select();" size="1" maxlength="1">
But if you're using angular properly, I don't you'l need that id unless you want to associate it with a <label>.
ng-repeat
In ng-repeat you can repeat an element and the index is tracked by {{ $index }}. It is zero-based though so you most likely need to add 1.
Split string to array
What you could do is to create an array of characters from your string/word and do an ng-repeat with it.
Track items by $index
It is important that you track the items by $index, so angular js does not complain about dupes.
Here's the code I propose:
<div style="float:left" ng-repeat="chars in selectedWord.split('') track by $index">
<input name="letters[]" class="answerbox" id="letter_{{$index + 1}}" onkeyup="testResults(this)" onfocus="this.select();" type="text" size="1" maxlength="1" >
</div>
I am not sure if it can be done without the surrounding div but if you make it float: left it should not make a difference.
I am using one $scope.sample variable to receive ng-model from two input fields. It is working fine. I do this: ng-model="sample.first" and ng-model="sample.second".
Then, I tried to remove the first input and use a dropdownlist instead. The dropdownlist is filled by a different variable $scope.list using the ng-model="list". The dropdownlist is filled correctly. However, I need to put the selected item in the dropdownlist to the $scope variable sample.first. This is not working. How can I do this?
Thank you,
Rafael
In Angular to do a select element, you would use this syntax:
<select ng-model="sample.first" ng-options="item.property for item in list"></select>
Where "item" is simply an object in your $scope.list array. The select should be properly filled and when an item is selected, it will set that item as your ng-model value, "sample.first".
I got it to work with :
##### <select ng-model="sample.first">
<option ng-repeat="list in lists" value="{{list.name}}">{{list.name}}</option>
</select> #### Using $scope.lists= [{name: "Joe"}] on the controller.
I'm working on an Angular application.
I want to generate a form with an arbitrary number of text input fields with two-way bindings for every individual input field. No buttons, no watchers. ng-model is not working correctly because of the scoping (if I'm not mistaken). The input fields are generated from an array with ng-repeat like this:
<div ng-repeat="item in items">
<label>{{item.name}}</label>
<input type="text" placeholder="{{item.default}}" ng-model="{{item.value}}"> <!-- this input should be bound -->
</div>
I just want a simple binding to update the items array in the controller on changes in the input.
Any help appreciated.
Just change input tag so it reads:
<input type="text" placeholder="{{item.default}}" ng-model="item.value">
Notice ng-model without curly braces.
Working plunk: http://plnkr.co/edit/CLdem9yIw2Sk1U52Iajl?p=preview