I have a ng-repeat iterating through an object of country names and country codes. I'm using ng-selected to preselect the USA (840) which works fine. However, when I introduce the ng-model (signup.user["country_code"]) to the select element containing the object I want to bind the selection to, the ng-select appears to be overridden by the signup.user["country_code"] property which by default is empty.
<select ng-model='signup.user["country_code"]'>
<option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'>
{{country["name"]}}
</option>
</select>
So just for clearance the below version is successful in preselecting but is no good due to the lack of binding, the above version does bind just fine but ng-selected is overridden.
<select>
<option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'>
{{country["name"]}}
</option>
</select>
Here is a snippet from my controller however I doubt it's that useful for solving this issue.
signup.user = {};
countryCodes.success(function(data) {
signup.country = data;
});
So just set country code initially in controller and use ngModel. You should also use ngOptions directive instead of ngRepeat:
signup.user = {country_code: 840};
HTML:
<select ng-model="signup.user.country_code"
ng-options="country['country-code'] as country.name for country in signup.country">
</select>
Related
I would like to create a custom attribute for each option element in a select element, but I am having trouble creating one that can be accessed via AbstractControl and event.target. Here is what I have:
I tried making a custom attribute called code, then tried using the id.
<select id="country" formControlName="country" class="form-control" (change)="getStates($event.target.value, $event.target.id)">
<option id = "{{cntry.code}}" *ngFor="let cntry of countries" [value]="cntry.id" [attr.code] = "cntry.code">{{cntry.name}}</option>
</select>
Elsewhere in the code, I have:
editForm.controls['country'].id
I had previously tried
editForm.controls['country'].code
but that didn't work either. I already have the value set for the option element so I can't use that. The attribute has to be accessible via AbstractControl and event.target.
Add a property country to your TypeScript for the component
country: Country; // Whatever type your countries are
then use ngModel to bind to the country and use ngValue for the options and bind to the country objects
<select id="country" formControlName="country" class="form-control" [(ngModel)]="country" (change)="getStates()">
<option *ngFor="let cntry of countries" [ngValue]="cntry">{{cntry.name}}</option>
</select>
Then in your getStates method you can use the property on the componenet with this.country
If you get a no ngModel property on select error then you need to add the Angular forms module to your module.
In my angular script i declare the following by pulling from my viewmodel provided by my ASP.net controller:
$scope.controlleractions = #Html.Raw(Json.JsonCamelCase(Model.ControllerActions));
resulting in the following data:
[{"$id":"1",
"controller":"Resource",
"actions":["Image","File"]},
{"$id":"2",
"controller":"Home",
"actions":["Index","NotAuthorized"]},
{"$id":"3",
"controller":"Email",
"actions":["Index","Details","Adress"]},
{"$id":"4",
"controller":"Account",
"actions":["Index","Login","Logout","Create"]},
{"$id":"5",
"controller":"Archive",
"actions":["Page1","Page2","Page3","Search"]}]
I want to be able to select a controller by a select element and then select an action from the actions array with a second select element, but i can't seem to work it out. Anybody an idea?
both outputs in the ng-models are preferred to be in string
this is how far i got:
<!-- selecting a controller works fine -->
<select ng-model="selectedController">
<option value="">All</option>
<option ng-repeat="controlleraction in controlleractions">{{controlleraction.controller}}</option>
</select>
<!-- selecting an action from actions that match the selected controller dosn't work -->
<select ng-model="selectedAction">
<option value="">All</option>
<option ng-repeat="action in controlleractions.actions | filter : selectedController">{{action}}</option>
</select>
Not sure why you use filter here, but simply bind your ng-repeat on selectedController instead :
<option ng-repeat="action in selectedController.actions">{{action}}</option>
I am trying to get the value that user selects from my dropdown.
I have
<select ng-model="item" ng-change="vm.getItem()">
<option value="discount">Discount</option>
<option value="{{::item}}"
ng-repeat="item in vm.items"
ng-bind="item.name"
</option>
</select>
In my controller
vm.getItem = function() {
vm.pickedItem = //not sure what to do...
//I need to get the select item
//please noted that the discount is a stand alone option value. I need to get
//that too if user selects it.
}
I don't want to use ng-option as it has some restriction that I don't need. I was hoping to get it from just regular <option> tag.
Thanks for the help!
I would recommend you to use ngOptions
Set up select element with proper model i.e. vm.pickedItem which can be directly used in controller, or you can pass it to your method like vm.getItem(vm.pickedItem)
<select ng-model="vm.pickedItem" ng-change="vm.getItem(vm.pickedItem )">
<option value="discount">Discount</option>
<option value="{{::item}}"
ng-repeat="item in vm.items"
ng-bind="item.name">
</option>
</select>
vm.getItem = function() {
var selectedItem = vm.item;
////vm.item is the bound variable to the dropdown's ng-model directive
}
If you really wanted to use the ng-change event in this scenario, then on your "getItem" event, you should access the model bound to the dropdown's ng-model called "item" as seen in your html markup.
you forgetting to alis your controller in your select
<select ng-model="vm.item" ng-change="vm.getItem()">
In controller
vm.getItem = function() {
console.log(vm.item)
or
console.log(this.item)
}
In Angularjs, binding input select to the model creates new empty option
<option value="? undefined:undefined ?"></option>
And this is the code
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>
Is this normal? It doesn't seem to be something good looking.
Make sure you have initialized your model variable with one of the option value.
Try this
Controller
$scope.hotspot = {};
$scope.hotspot.category = "Culture";
HTML
<select name="category" ng-model="hotspot.category">
<option>Culture</option>
<option>Education</option>
<option>Parks</option>
<option>Student Pubs</option>
</select>
Currently I create a Handlebars template for each form and use value={{user}} in them. So I can fill any form easily for updating any entity. But select, radio and ckeckboxs are different. Is there any clean way to populate these elements too. They do not have value attributes.
<select id='select'>
<option selected value=user name=test>test</option>
</select>
as you can see, you can control the value of select by set "selected" attribute to specific options.
Or you can try embed some javascript code like
document.getElementById('select').value={{user}}
You need to make sure you have options with correct value attributes set
You can achieve this by making use of the each helper.
<select>
{{#each options}}
<option>{{this}}</option>
{{/each}}
</select>
Where options is a plain array (["apple", "banana", "pear"]).
You can find more info on the homepage. There's also an example where your array contains object, which could be useful should you need to specify value attributes.
On stackoverflow, I found this reply :
How to set selected select option in Handlebars template
With a very good solution (from #janjarfalk edited by #BlaM) :
With this partial (using Jquery) ...
window.Handlebars.registerHelper('select', function( value, options ){
var $el = $('<select />').html( options.fn(this) );
$el.find('[value="' + value + '"]').attr({'selected':'selected'});
return $el.html();
});
You can wrap selects in your Handlebars template with {{#select status}}...
<select>
{{#select status}}
<option value="Completed">Completed</option>
<option value="OverDue">OverDue</option>
<option value="SentToPayer">SentToPayer</option>
<option value="None">None</option>
{{/select}}
</select>