Angular model change isn't reflected to html select box - javascript

I have an html list with a form for defining filter values. In this form there is a select box:
<div style="...">
<label for="lstCategory">Category:</label><br/>
<select name="category" id="lstCategory" ng-model="category" ng-change="loadActivities()">
<option value="0">default1</option>
<option value="1">default2</option>
<option ng-repeat="category in categories" value="{{ category.id }}">{{ category.id }}</option>
</select>
</div>
In my controller I bind the "categories" model to a REST resource:
.controller('AppointmentsHomeCtrl', [
...
function(
...
) {
$scope.location = typeof $location.search().location != 'undefined' ?
$location.search().location :
'0';
$scope.category = typeof $location.search().category != 'undefined' ?
$location.search().category :
'0';
$scope.categories = CategoriesResource.query();
Now I want to preselect a value in this select box, depending on the dearch parameter "location" in my url, which is done by the $scope.category = typeof $locati....... part of the code.
My problem is, that this preselection isn't reflected to my HTML while the mnodel itself has the correct value.
I already tryed to set the value after the query to the resource is done by watching the resource or giving a callback function to the "query" method but this also isn't working.
Did I missed something here? What is the correct way to solve this problem?
Edit:
It seems to recognise the options since:
$scope.category = "foo"; adds a pseudo option which gets selected.
But when I choose an existiong id, nothing happens at all:
$scope.category = "3";

at controller you can try this method for preselect value
$scope.precategory = '0'; //just for example value
then on your html code make sure ng-model having different variable with ng-repeat like this one
<select name="category" id="lstCategory" ng-model="precategory " ng-change="loadActivities()">
<option value="0">default1</option>
<option value="1">default2</option>
<option ng-repeat="category in categories" value="{{ category.id }}">{{ category.id }}</option>
that method will help solve your problem, because i was getting same problem before :)

Instead of $scope.categories = CategoriesResource.query(); try:
CategoriesResource.query().then(function(result) {
$scope.categories = result;
});
You may have to tweak it a bit if the result is not an array...

Related

Blank select option #ngValue

How can I avoid blank option in the form output?
<select class="form-control" ng-model="item.type" >
<option ng-value="0">Real</option>
<option ng-value="1">Fake</option>
<option ng-value="2">Both</option>
</select>
item.type is set in the controller
The issue slightly different from what I saw in similar topics because of usage of ng-value and the fact, that value of item.type is already set
Edit: Changing ng-value to value solved the issue.
How is item.type set in the controller?
The blank line is the current value of item.type. If you set it as an object in the controller, it's normal to be shown that way. Try setting it to one of the 3 choices you have like this:
angular.module('yourModule').controller('ctrl', function($scope)){
$scope.item = {}; //edited
$scope.item.type = "1"; // or 2, or 0
}
This is how angular handles two-way databinding. If the value of your item.type does not match any of the options, it is normal to add another blank line.
EDIT:
<select class="form-control" ng-model="item.type" >
<option value="0">Real</option>
<option value="1">Fake</option>
<option value="2">Both</option>
</select>
The problem of blank option is due to the ng-model is not matching with the ng-option values. Could you just print the value of item.type in view using {{item.type}}.
Make the following changes.
In controller set the item.type as
$scope.item = {};
$scope.item.type = "1";
make the following changes in html.
<select class="form-control" ng-model="item.type" >
<option value="0">Real</option>
<option value="1">Fake</option>
<option value="2">Both</option>
</select>

ng-selected not working

My problem is that ng-selected is set as true but the option is not getting selected
This is my controller code
.controller("PendingInvoiceCtrl", function($scope, $location, safeApply, dataService) {
var userData = dataService.data();
var mauth_token = userData.mauthToken;
var mauth_acntId = userData.thisApartment.account;
var apt_id = userData.thisApartment.id;
$scope.house_list = userData.thisApartment.house;
$scope.selectedHouseId = $location.search().houseId;
console.log($scope.selectedHouseId);
});
This is my HTML code
<select ng-model="selectedHouseId">
<option ng-repeat="house in house_list" ng-selected="{{ house.house_id == selectedHouseId }}" value="{{ house.house_id }}">
{{ house.house_display_name }}
</option>
</select>
And below is my data format
{
house:[0]:{
house_display_name: "paras, 101",
house_id: "520755"
}
}
The ng- attributes don't need the extra curly braces. Try:
<option ng-repeat="house in house_list" ng-selected="house.house_id == selectedHouseId" ng-value="house.house_id">
{{house.house_display_name}}
</option>
A better approach would be to use the ng-options possibility of the select tag. This would result in:
<select
ng-model="selectedHouseId"
ng-options="house.house_id as house.house_display_name for house in house_list">
</select>
And then you don't need to manually worry about the selected attribute for the options, as it will select the one depending on the value of the model.
Your option tag should be:
<option ng-repeat="house in house_list" ng-selected="house.house_id == selectedHouseId" ng-value="house.house_id">
if you use ng-Selected and ng-Model together was never really specified. It looks like at some point ng-Model took priority over ng-Selected.
I recommend you to use the Angular Directive ng-options.
<select ng-options="house.house_id as house.house_display_name for house in house_list" ng-model="selectedHouseId"></select>
Associated plunker: http://plnkr.co/8LGz5o0d2gDRoRHYr4pQ

Empty option as default select when ngoptions data is bound asynchronously

I have the ngoptions array bound asynchronously inside my controller. When I create a select with it, there is an empty option being created. How do I avoid?
<select data-ng-model="order.employee" ng-options="employee._id as employee.name for
employee in employeess"> </select>
My controller code
Employees.query(function(employees){
$scope.employees = employees
});
How do I avoid empty select being created? I tried ng-init but it didn't work
Solution
(1) You can create blank option. This will be selected by default.
$scope.order.employee = -1
<select data-ng-model="order.employee" ng-options="employee._id as employee.name for
employee in employeess">
<option value="-1">--Select--<option>
</select>
(2) You can select first option
Employees.query(function(employees){
$scope.employees = employees
$scope.order.employee = employees.length ? employee[0]._id : -1
});
That's because you didn't initialized your model.
You have to set a default value for your ng-model="order.employee" in your controller.
Like:
$scope.order.employee = -1
and your select should have this structure:
<select data-ng-model="order.employee" ng-options="employee._id as employee.name for
employee in employeess">
<option value="-1">Click to Select<option>
</select>

Can't set select value from my controller, Angular JS

From this example
I'm trying to set the select value from my controller and this doesn't work for me even when I set the id as explained in many questions here. The only difference is that I have a default value set with ng-init. How do I set the value from the controller?
DOM:
<select ng-model="storeorder" ng-init="storeorder = 0" ng-change="storeOrderChange(storeorder)">
<option value="0">-- All orders --</option>
<option ng-repeat="obj in orders" value="{{ obj.id }}">{{ obj.name }}</option>
</select>
JS inside a function:
$scope.orders = data;
$scope.storeorder = parseInt($scope.order); // Tried without parseInt also
console.log($scope.storeorder) returns the right value, but it doesn't set the right value in the browser DOM.
If you don't want to use ng-options(which is the right way) , you can try with
ng-selected : Working Demo : http://jsfiddle.net/nf2m0rr1/
Example :
<body ng-app ng-controller="OrderCtrl">
<div>Order is: {{storeorder}}</div>
<select ng-model="storeorder">
<option ng-selected="{{order.value == storeorder}}" ng-repeat="order in orders" value="{{order.value}}">{{order.displayName}}</option>
</select>
</body>
function OrderCtrl($scope) {
$scope.storeorder = 2;
$scope.orders = [{
value: '1',
displayName: 'Order One'
}, {
value: '2',
displayName: 'Order Two'
}]
}
Use ng-options:
<select ng-model="storeorder" ng-init="storeorder = 0" ng-change="storeOrderChange(storeorder)" ng-options="obj.id as obj.name for obj in orders">
ng-options solved 50% of the problem but I still needed to handle the default value in the DOM and change the ng-init option. This was really bugging me. Here's the complete solution which enabled me to not set anything from the controller:
<select ng-model="storeorder" ng-options="orderdata.id as orderdata.name for orderdata in orders" ng-init="storeorder = order == 0 ? 0 : order" ng-if="orders.length > 0" ng-change="storeOrderChange(storeorder)">
<option value="">-- All orders --</option>
</select>

How to get value at the ng-model for the options under ng-repeat

Let my HTML is as follows:
<div ng-repeat="option in options">
<select ng-model="myselect">
<option value="">{{option.attribute_text}}:</option>
<option value="">{{option.attr_value}}-${{option.cost}}</option>
</select>
</div>
I want to get the values of the option selected in the ng-model. Is there any methods to get the values in the ng-model under a ng-repeat?
You have multiple selects and you are giving same model to all of them.
you can't give them same myselect to all of them.
give each option(the ones you are repeating) a name, and use an object's keys for their model.
<div ng-repeat="option in options">
<select ng-model="selections[option.name]">
<option value="">{{option.attribute_text}}:</option>
<option value="">{{option.attr_value}}-${{option.cost}}</option>
</select>
</div>
then you can access them like $scope.selections["some option name you gave earlier"]
if you want to use select you can use ng-select
if you specify ng-model for ng-select it bind the select option to ng-model
you can see it in this jsbin
Have a look at: https://docs.angularjs.org/api/ng/directive/select
Here's an example that should be about right:
Options stored as list of hashes in your controller:
$scope.options = [ { "attribute_text" : "whatever", "data" : { "value" : 9, "cost" : 8 }, { ... } ]
// Selected value
$scope.optionSelected = {};
HTML:
<div>
<select ng-select="option.attribute_text for option in options" ng-model="optionSelected">
</div>

Categories

Resources