I have a dictionary of objects with some duplicate ids like this:
var groups = {"0": "attributes":[{"id":2, "name":"abc"},
{"id":5, "name":"xyz"}],
"1": "attributes":[{"id":2, "name":"abc"}]}
I want to fetch this group into input text fields of form like this
<div ng-repeat="group in groups">
<input type="text" ng-model="group.value"/>
</div>
Its working fine if I have all the distinct ids but I want the input fields with duplicate ids to be attached with same ng-model, so that if one input is filled then another one gets filled automatically.
Searched almost everything but couldn't come up with any solution. Any help would be appreciated.
Thanks in advance :)
The HTML standard requires elements to have unique IDs to be valid. Use a class to select multiple elements using a shared selector. You could write some code to have each element with the same ID have the same ng-model value.
Related
building an app that retreives data from a database.
Created 2 dependable dropdowns
1.Categories
2. branches
all select options are coming from a json tree (Array in an Array) that is fetched by a service(Categories).
in controller i fetch json with :
$scope.categories = Categories.query();
in html i try below code:
<select class="form-control" name="category" ng-model="params.category" ng-options="item as item.name for item in categories track by item.category">
</select>
<select class="form-control" name="branch" ng-model="params.branch" ng-options="branch as branch.name for branch in categories[params.category].branches track by item.category.branch">
</select>
Dropdown 1. Categories fetched ok but Dropdown 2. branches doesnt work.
Can you guide??
Since you have an array of arrays, I think the params.category variable will hold a reference to an array, so you can't use it in the second select with categories[params.category] because you need to use the index and not the reference. I suggest you try: categories[categories.indexOf(params.category)].
EDIT:
Since I don't know what your categories array looks like, and what a branch array looks like, I can only guess according to your code. IF your data structure is similar to what I think - here is a working plunker.
The main idea is that if an element inside your categories array is an object and has a branches property, then after you put a reference to it in $scope.params.category than you can just access the branches property using dot notation (no need to go back to the categories array).
In my angularjs application, I am using multi select dropdown and its model is coming as follows :
$scope.selectedValues = [{"id":2,"name":"Automatic"},{"id":4,"name":"Manual"}];
and this model is nicely getting displayed. There is no problem in that. Now during view application stage, I need to hide this multi select drop down and need to show the all names in $scope.selectedValues in text area. Without doing the manipulations in controller to get the model value for the text area, is it possible to extract names from $scope.selectedValues and display them as space separated values from html itself?
<textarea class="form-control" ng-model="allInsurancesNames" ng-if="needToDisbleMutiSelectDrpDown"></textarea>
Here the model allInsurancesNames should contain all names as space separated from model selectedValues. We can do any thing in html like using ng-repeats, or expressions, etc, whatever is needed to achieve this, but allInsurancesNames should not be populated from $scope.selectedValues in controller.
If you can create a function inside your controller, you can do something like this:
$scope.mapFunct= function(value){
return value.name;
};
And
<div ng-controller="ctrl" ng-init="allInsurancesNames=selectedValues.map(mapFunct).join(' ')">
Working Plunk
I am trying to do it in proper way with less pain, but i can't figure out how to deal with ng-model and binding it to the selected list etc and moreover i need to populate that list in later time and keep selected objects in it.
categories = [ { "name": "Sport", "id": "50d5ad" } , {"name": "General", "id": "678ffr" } ]
<span ng-repeat="category in categories">
<label class="checkbox" for="{{category.id}}">
<input type="checkbox" value="{{category.id}}" ng-model="??" ng-click="??" name="group" id="{{category.id}}" />
{{category.name}}
</label>
</span>
I have to override the categories each time the list is populated since it will be pulled out from a server.
So I guess I need to have arrays and the second one will hold the selected objects?
If I am right, how do I preselect checkboxes?
Do I need ng-click in order call custom function to store the selected object in the other array?
Do I need ng-model in checkbox And what for?
What is the proper-way with less pain?
I have to override the categories each time the list is populated
since it will be pull out form server. So i quess i need to have
arrays and the second one will hold the selected objects?
Yes, since it is a list you can/should use arrays. The information about the selected items/objects should be stored on your scope model (example below).
If I am right, how do I preselected checkboxes?
Save the ID's of the selected options/checkboxes on your model and let the ng-model do the rest.
Do I need ng-click in order call custom function to store the selected
object in the other array?
No, you don't need it, ng-model is enough.
Do i need ng-model in check box? And what for?
Yes, you need it. The ng-model is responsible for storing the selected options on your model and for making the ('pre-')selection automatic.
jsfiddle http://jsfiddle.net/bmleite/PQvQ2/
I'm trying to implement a multilingual text input field with a little dropdown button to the left for selecting the language. For instance, when the dropdown menu shows 'de' the text field should be bound to model.multilingualData['de'].someField and so on.
My first approach was to set ngModel to model.multilingualData[selectedLanguage].someField. But when the user selects a different language without filling in the field correctly, no error is set on the form, because the model now points to a different object.
My next idea was to create an entire element directive without ngModel, but then I wouldn't be able to do other validations like ngMaxLength.
I couldn't find anything helpful on the web either. Any idea on how to implement this properly?
EDIT
Here's a little fiddle that illustrates the problem: http://jsfiddle.net/FZ2kg/
Not only that the form appears valid when you switch languages, the previous field value is also deleted, because the model is set to null when the field becomes invalid.
would be nice if you use this awesome external directive for multilanguage!
https://angular-translate.github.io/
I hope it helps
If you need to have form validation for all language variations and you're loading all languages at once in your model, can't you just create an input per language in the form and hide all but the currently selected language?
Here's a fiddle: http://jsfiddle.net/jvl70/w3rstmwd/5/
<form name="myForm">
<div ng-repeat="(lang, value) in model.multilingualData"
ng-show="lang==stuff.currentLanguage">
<ng-form name="innerForm">
<div ng-class="{ 'has-error': innerForm.anything.$invalid }">
<input type="text" name="anything" ng-model="value.someField" ng-maxlength="6"/>
</div>
</ng-form>
</div>
</form>
(At first I tried to use dynamic names for each input but found that the individual field $invalid wasn't available for dynamically named inputs. See this post to get around it: Dynamic validation and name in a form with AngularJS.
As an alternative to ng-form, you could use dynamic names for each input and try one of the custom directives on the link.)
I guess if there were many possible languages, this approach might get slower but it's ok for a few languages.
I've got some JSON data- an Array of Fields containing Input Type (input, dropdown, radio, checkbox, etc.), Label and whether they are required or not.
I'm doing an ng-repeat through the array to build the form. I'm trying to understand what's the best way to build different kinds of inputs based on the Input Type value.
In normal programming, I would do a
foreach (var field in FormData){
if (field.inputType == "dropdown"){
//logic to build dropdown using jQuery, etc..
}
}
In AngularJS, I can't really do if thens within an ng-repeat="field in FormData". What's the proper way to dynamically build out these different kinds of elements while looping through an array?
This question is very similar:
How can I use Angular to output dynamic form fields?
Many thanks for any suggestions.
In my application, I did use an ng-switch (see the answer from the very similar question) in my ng-repeat to achieve something similar to this. The only problem with this is to link to the model. If you want to bind to a property name that is stored in a variable (if you json contains an id for the field), you won't be able to something like this :
<input type="text" ng-model="formdata.{{elem.id}}" />
I found that you can do this instead :
<input type="text" ng-model="formdata[elem.id]" />