I have a dropdown generated using ng-options
<select class="form-control" ng-options="item.value as item.label for item in filterFields track by item.value" ng-model="selectedFilterField">
</select>
The problem is that when I select an option from this dropwon, the selected item appears as empty and an extra blank element is added to the dropdown. What am I doing wrong?
Edit: added controller code:
$scope.columns = accountColumns;
$scope.filterFields = [];
$scope.filterFields.push(defaultSelectOption);
$scope.filterFieldValues.push(defaultSelectOption);
var idx = 1;
for(i=0; i < accountColumns.length; i++) {
var option = {label: accountColumns[i], value: accountColumns[i]};
$scope.filterFields.push(option);
}
$scope.selectedFilterField = $scope.filterFields[0];
Let's say your filterFields array has objects that look like this:
{
name: "",
value: 0
}
In your ng-options you tell angular that the possible values for the select is an array of these objects. But you also tell angular that when you select an option then the real value is the object.value; So now angular sees that this value is not present in the array of options and tries to add it or something.
Initially the dropdown works because you set the ng-model to a complete object present in the filterFields array.
Try it with this:
ng-options="item for item in filterFields track by item.value"
Related
I have a request that returns an array of objects based on a Provider selected. Like this:
data:[
0:
Producto:"Chiken",
Unidad: "box",
PrecioUnitario:"34334",
etc..
1:
Producto:"Chiken",
Unidad: "box",
PrecioUnitario:"200",
etc..
]
I'm displaying the data properly in a <select> tag
What I want is that if the user selects let's say "Carne Asada" all of the other properties of that selected child object are auto-selected on the rest of the fields, i.e:
Unidad text input should be "box" automatically, "precioUnitario" field should be 200.
Or visually:
Another thing is that it should display the value that the object has but it can be edited by the user.
Controller:
$scope.columns = [{colId: 'col1', producto:[], catidad:'', unidades:[], preunit:''}];
$scope.fact = {};
$scope.get_proveedor_prod = function(fact){
var data = {ProveedorID: fact.ProvID};
$http.post(URL + "/api/get_prod_by_provider.php",data).then(function(callback) {
$scope.products = callback.data;
});
}
View:
<md-input-container>
<select ng-model="fact.producto"
ng-options="item.ProductID as item.NombreProducto for item in products"
class="form-control selectformcc" required>
<option value="" disabled selected>Producto</option>
</select>
</md-input-container>
(I'm assuming your data notation is incorrect and that you meant to use an array of objects.)
Bind the select to the whole item instead of to a property of the item:
ng-options="item as item.NombreProducto for item in products" //not ="item.ProductID...
Now fact.producto (select model) is an object and will contain the whole item. In your Unidad text box you can use:
<input type="text" ng-model="fact.producto.Unidad" />
Here is an example with easy to understand data: Working Fiddle
I have an ng-options iterating over an object, the key of this object is the value I need the ng-options to be set to.
I set the ng-model in my controller to default the select box.
Using track by breaks the ng-model default, however stopping track by removes the issue but introduces another where the default of the select box is no longer the key of the object.
How can I get around this issue?
The HTML I am using is as follows
<select
class="form-control"
ng-change="flightNumber = airline[0]"
name="airline"
id="airline"
ng-model="airline"
ng-options="airline for (airline, flights) in orderedFlights track by airline">
</select>
In my controller I have the following:
var flights = {
"Airline": {
},
"Airline 2": {
},
"-- No Airline Selected --": [
{
unselected: true
}
];
}
$scope.orderedFlights = flights;
$scope.airline = flights["-- No Airline Selected --"];
Sup guys! I am trying to build a dynamic form, but I got stuck in a ngModel problem.
The idea is:
I got 2 arrays: one for temporary show to user selected info, and another that is which actually is saved on post (I have different types of data, so I have to do this way).
1- The user uses a <select> to choose a option. The selected option is a object inside a list. User hits the add link, and the selected option pop for him.
2- The selected option, has a custom property, that must be set before hit the add button. For that, a ´input´ pop when an option is selected. the ngModel for this is dynamically set, based on a object's property.
3- I need to get the input data, and save it inside a property of the object selected on the list.
4- Push the object to the array-to-be-posted (newData).
What I have that work: the list, the dynamic ngModel.
What I need: to get the data from this ngModel ad use it inside my directive.
here go the codes:
html:
<select id="newPrereq" class="form-control" name="newPrereq" ng-model="newPrereq" ng-options="prereq.name group by prereq.cat for prereq in prereqs | orderBy:prereq.name">
<option value="" hidden>-- Select --</option>
</select>
<input type="{{newPrereq.type}}" ng-show="newPrereq.array" ng-model="newPrereq[ngModel]">
<a ng-click="addItem(newPrereq, selectedPrereqs, 'prereqs')" ng-show="newPrereq !== undefined || ''">add</a>
<ul class="list-inline">
<li ng-repeat="prereq in selectedPrereqs"><span>{{prereq.name}} </span> <a ng-click="removeItem($index, selectedPrereqs, 'prereqs')">[X]</a></li>
</ul>
directive (scope:false) relevant functions:
scope.prereqs = Lists.prereqs;
scope.addItem = function(obj, array, group){
array.push(obj); // Add item to array-to-be-posted
if(obj.array){
scope.newData.prereqs.proficiencies.push({'name': obj.name, 'cat': obj.cat, 'details': [something here to get the ng-model from DOM]})
};
scope[group] = scope[group].filter(function(list){ // Remove added item from the <select>
return list !== obj;
});
scope.newPrereq = undefined;
};
part of the list (come from a Lists.js service)
'prereqs': [
{'name':'option 1', 'cat':'category 1', 'type':'text', 'ngModel':'smDetails', 'array':true},
{'name':'option 2', 'cat':'category 2', 'type':'text', 'ngModel':'srDetails', 'array':true},
]
I have this code and information:
$scope.options = [
{ id: 1, label: "My label" },
{ id: 2, label: "My label 2" }
];
$scope.selected = 2;
<select ng-options="opt.label for opt in options" ng-model="selected">
<option value="">Select one</option>
</select>
However, the options are created like this:
<select ng-options="opt.label for opt in options" ng-model="selected">
<option value="">Select one</option>
<option value="0">My label</option>
<option value="1">My label 2</option>
</select>
How can I set the selected option to My label 2? I know it can be done:
$scope.selected = $scope.options[1];
But my problem is that option is created in a directive, and at that moment I don't know 1) how many values has $scope.options, nor 2) what is the index of the selected option in database. The only thing I know is the id (which is in the object).
The html of my directive is something like this:
<select ng-switch-when="select" ng-model="form.model[element.model]" ng-options="{{element.rule}}"></select>
Where element.rule is:
rule: "role.role for role in element.options"
And element.options has the array with options, and form.model[element.model] has the id of the option selected.
How can I get the index of the element with ID X in the array $scope.options? I'm very sure that will give me the solution, but I don't know how to do it...
Just set the correct model value when initiating the controller. You can easily get the correct array value if you know the ID by using a filter:
$scope.selected = $filter('filter')($scope.options, {id: 2})[0];
The issue with your code as I see it is that the 'selected' value coming out of your database is the ID of the object selected and not the object itself. This is fine but because of that difference you can't simply set
$scope.selected = 2 //assuming 2 is the value coming from your database
because the value '2' does not exist in your option array. The Object with an ID of 2 does.
If you can always guarantee the options you have in the option array are from 1-n and in that order, you can accomplish this by simply using this instead:
$scope.options = [
{ id: 1, label: "My label" },
{ id: 2, label: "My label 2" }
];
var selectedIdFromDatabase = 2;
$scope.selected = $scope.options[selectedIdFromDatabase-1];
If you can't make that guarantee (and even if you can for now, it may not be a good idea to make that assumption in your code) you'll need iterate over the array of objects you have to identify the object with an ID of the selectedId from your database.
The answer to this question has a great write-up about the type of data-processing you'll need to do and a lot more information about javascript objects in general.
Can't figure this out for the life of me. Using AngularJS.
I have a dropdown Select field with several options. It is a part of a form that may be completed multiple times (ie "add another" type form). Now, one of the options may only be used once. How can I remove this option from all other select fields after it has been used?
What I'm working with:
html
<select ng-model="item.itemtype">
<option ng-repeat="i in itemtype" value="{{i}}" ng-init="item.itemtype = itemtype[0]">{{i}}</option>
</select>
angularjs
$scope.Items = [
{ 'itemtype': '', 'desc': '', 'color': '' }
];
$scope.itemtype = [
'shirt',
'pants',
'hats',
'shoes',
'special'];
What I've tried (and really doesn't work)
$scope.specialremove = function() {
var exist = Items.indexOf("special")
if (exist !== 0) {
return '';
}
else {
return 'special';
}
}
I'm hoping I don't have to turn to any other framework to solve this. Feel free to point out any other problems/errors/inefficiencies in my code.
The first thing that can help is using ng-options:
ng-options="type for type in itemType".
It would be better to have objects with label and value properties, in order to write it as
ng-options="type.value as type.label for type in itemType"
and separate the displayed label from the actual value of the selection.
In your controller you should have something like:
$scope.itemType= [
...
];
$scope.selectedItem= $scope.itemType[0];
So that you can write the select as:
<select ng-Model="selectedItem" ng-options="item.value as item.label for item in itemType"></select>
To remove a selected item you can watch the value of selectedItem in the controller: when it matches the value you want, remove it from the array and update selectedItem accordingly.
Here is a basic fiddle. I simply remove the third option after selecting it, and reset the selected item to the first.