I have been toying around with a modal form, the form works great to submit data, but now I need the form to edit data. So I want to populate the form from a callback from the server. The structure of the form is as follows:
HTML:
<div class="form-group modalContent">
<label for="manufacturer">MANUFACTURER</label>
<select class="form-control" id="manufacturersList"
ng-model="form.manufacturers" required
ng-options="man.manufacturer for man in manufacturers | orderBy:'manufacturer'"></select>
</div>
AngularJS:
$scope.form = {
//The value will be the value from the callback
"manufacturers": "Acer"
}
EDIT: CALL BACK
{"status":{"error":"none","code":200,"description":"none","message":"success"},"manufacturers":[{"manID":"2",
"manufacturer":"Acer"},{"manID":"3","manufacturer":"Honeywell"},{"manID":"11","manufacturer":"HP"},{"manID":"9","manufacturer":"Juniper"},{"manID":"1","manufacturer":"Lenovo"},{"manID":"6","manufacturer":"Logitech"},{"manID":"8","manufacturer":"Netgear"},{"manID":"7","manufacturer":"Other"},{"manID":"10","manufacturer":"StarTech"},{"manID":"5","manufacturer":"Viewsonic"},{"manID":"4","manufacturer":"Zebra"}]}
Shouldn't this populate the value in the <SELECT>?
ng-model points to the variable that holds the selected value.
And according to the syntax you used in ng-options you should place manufactures in $scope directly.
<select class="form-control" id="manufacturersList"
ng-model="selectedManufacturer" required
ng-options="man for man in manufacturers | orderBy:'manufacturer'">
</select>
$scope.manufacturers = ["Acer", 'HP', 'Toshiba', 'Lenovo', 'ASUS'];
Example in Plunker
Hope this helps
Related
Currently when the user selects an item from the DDL, the Id will be set to my model vm.Blah.Id
<div class="col-md-4">
<label for="Blah">Blah blah</label>
<select class="form-control" id="blah" ng-change="vm.LoadBlahs()" ng-model="vm.Blah.Id">
<option value="">Select some Blah</option>
<option ng-repeat="m in vm.BlahList" value="{{m.BlahId}}">{{m.Name}}</option>
</select>
</div>
When a DDL item is selected, I need to do this somehow:
vm.Blah.Id = m.BlahId;
vm.OtherBlah.SectionId = m.SectionId;
How can I update 2 things like that?
I'm on version 1.5.8
You may have to re-work some of your code but a possible solution would be:
Change ng-model to be a new variable that holds the selected item.
Pass the ng-model (in your case m) as an argument to the ng-change function (See
https://stackoverflow.com/a/22017098/1729686 for how to do this).
Update the things in the ng-change function.
I'm trying to create a select widget using Angular's ng-options. I have this so far:
<select id="id_question" name="question" ng-model="post.Question"
ng-options="question.id as question.title for question in questions"
ng-change="updateFields(post.Question)" required>
</select>
I need an object passed through as a parameter to the 'updateFields' method. However, due to the ng-options using the 'id', this is not possible.
How do I retain using id as the value in the select widget but also have the ability to pass the 'question' object as a parameter in ng-change?
There is no way to pass complete object to your function if you are using ng-options. Instead what you can do is set your ng-model to some other property and use that property to assign value to your post.Question variable.
<select name="question" ng-model="selectedValue"
ng-options="question as question.title for question in questions"
ng-change="updateFields(selectedValue)" required>
</select>
in JS
$scope.updateFields = function(question) {
$scope.id = $scope.selectedvalue.id;
console.log(question);
}
Please have a look at plunker
When ever you use ng-model for a select element you need not pass the selected object as a event parameter in ng-change.
Have a look at the below code
$scope.updateFields=function(){
console.log($scope.selectedQuestion);
}
Your HTML must be as
<select name="question" ng-model="selectedQuestion"
ng-options="question as question.title for question in questions"
ng-change="updateFields()" required>
LIVE DEMO
Assumed json
$scope.questions=[
{title:'A',id:1},
{title:'Abcdef',id:4}];
My requirement is to update the email id.When I enter the email manually in input box its getting mapped with ng-model and calling controller, but for prepoluted value its not getting mapped to ng-model.
<div class="col-sm-12">
<input type="text" class="form-input form-control" id="defaultInputText" ng-model="details.emailAddr" placeholder="yourname#email.com">{{accSummary.response.custEmail}}
</div>
I tried with ng-bind="accSummary.response.custEmail" and value="{{accSummary.response.custEmail}}" but no luck.
Can anybody help me what I am missing here..!! thanks in advance
Set this model from controller as a prepopulated value accSummary.response.custEmail.
$scope.accSummary.response.custEmail = "YOUR_DEFAULT_VALUE";
Set default value of that model in controller.
I have set up a json containing a list of countries with an ID and Country code attached:
It looks like this:
$scope.countries = [
{"name":"Afghanistan","id":"AFG","country-code":"004"},
{"name":"Åland Islands","id":"ALA","country-code":"248"},
{"name":"Albania","id":"ALB","country-code":"008"},
{"name":"Algeria","id":"DZA","country-code":"012"}
]
I then use the ng-repeat directive to create checkbox inputs for every country.
<div ng-repeat="country in countries">
<label><input type="checkbox" ng-model="{{country.id}}" ng-true-value="'{{country.name}}'" ng-false-value="''">{{country.name}}</label>
</div>
However when I run the code I only get the following to display:
Location
checkbox here {{country.name}}
If I remove the ng-model part of the repeat my checkboxes generate fine but I need a unique ng-model to be attached to every checkbox
ng-model="{{country.id}}"
How would I go about attaching a unique ng-model value?
This answer (Generate ng-model inside ng-repeat) does not provide a unique ng-model value
I will suggest you, use:
<div ng-repeat="country in countries">
<label><input type="checkbox" ng-model="myCountry.selected[country.id]" ng-true-value="'{{country.name}}'" ng-false-value="''">{{country.name}}</label>
</div>
{{myCountry.selected}}
JS:
$scope.myCountry = {
selected:{}
};
I have a list of dynamically generated radio boxes.
<div id="Address" class="modal-body" ng-show="AData">
<h5>
Select the correct address information from the list below.
</h5>
<label class="list-group-item" ng-repeat="address in Addresses">
<input type="radio" class="SuggestAddresses" ng-model="SelectedAddress" name="grAVR" ng-value="address" />
{{values.AddressLine1}} {{values.City}} {{values.State}} {{values.Zip}}
</label>
</div>
I am trying to access the model SelectedAddress in my controller but its value is undefined in controller. When I store this radiobox model value in a predefined scope variable that is already in my controller, it works fine.
To add some explanation to the comment above, ng-model="adress.selectedAdress" will allow you to access the obects property.
Note that you are working with an object in a list, represented by adress in your ng-repeat. This corresponds to Adresses[adress].selectedAdress