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)
}
Related
I have researched this issue and have found solutions using php but not angular.
One of the requirements for saving the data on my page requires that two seperate angular objects have the same Id. Below is the code:
HTML
<select class="form-control" ng-model="temp" ng-options="type as type.Name for type in Displays">
</select>
AngularJS
$scope.Prop = Prop.data;
$scope.Displays = Displays.data;
What I would like to do is when the angular object is selected in the dropdown I want to assign the Displays.Id to equal the Prop.TestTemplateId.
How would I do this? Thanks in advance
I understand that the value you select in your dropdownbox is bound to '$scope.temp'. Therefore, when initializing the controller, you could watch that variable and update '$scope.testProp.TestTemplateId' with the new value as follows:
$scope.$watch('temp', function(newType, oldType) {
$scope.Prop.TestTemplateId = newType.Id;
});
This will make ..
angular watch '$scope.temp'
whenever that value changes (e.g. selected via dropdown), the given function will be called with the new value (and the old value)
within that function you can update '$scope.testProp.TestTemplateId'
You could utilize ng-change directive on the <select> the would trigger a function that sets/updates the value of the property. You can retrieve the value of selected item from the "temp" property you defined in the ngModel directive.
HTML:
<select class="form-control" ng-model="temp" ng-options="type as type.Name for type in Displays" ng-change="update()">
</select>
JS:
$scope.update = function() {
// can retrieve value of selected item of "temp" ngModel property
$scope.Prop.TestTemplateId = $scope.temp.id;
};
The simple way would be ng-change
View:
<select class="form-control"
ng-options="type as type.Name for type in Displays"
ng-change="setId(type.Id)">
</select>
Ctrl:
$scope.setId = function(Id){
$scope.Prop.TestTemplateId = Id;
};
Or you can just set the value directly in the view
<select class="form-control"
ng-options="type as type.Name for type in Displays"
ng-change="Prop.TestTemplateId = type.Id;">
</select>
I want to display by default a value from a json which is something like
[{"city":"SURAT"},{"city":"BARODA"},{"city":"AHMEDABAD"},{"city":"MUMBAI"}]
this is came from server. I am store this value in $scope.user_all_city and there is one city is provided to user which is i am stored in this
$scope.user_city = "surat";
now my select tag is something like this
<select ng-model="model.user_all_city" ng-options="rm.city for rm in user_all_city" ng-init="model.user_all_city=user_city">
it is display first value as a blank. it is return to me default city when i am print {{mode.user_all_city}} but it is didn't display as selected option in it.
please help me over here and how to call a function in when i am change the value.
Try using ng-repeat instead of ng-options basically the ng-options is not that much descriptive in angularjs.
<select ng-model="cityName" required>
<option>Select city</option>
<option ng-selected="cityName==city" value="{{city}}" ng-repeat="city in cityList"></option>
</select>
here the required attribute will enusre that select city is highlighted in case of null value. and ng-selected will check if that expression is true and the only that object is selected.The value inseide the model=cityName play the role of selected value here.
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>
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>