I have a select like this:
<select class="form-control" ng-hide="Catalogos.length==0" ng-change="filtro(selected)" ng-model="selected" ng-options="item.Nombre for item in Catalogos "></select>
and it Charge it with Angular Controller like this:
function cargarCatalogo() {
apiService.get("../../api/Catalogo/GetCatalogoPadre/" + $scope.Catalogo + "/",
null,
function(res) {
$scope.Catalogos = res.data;
$scope.selected = $scope.Catalogos[0];
$scope.filtro($scope.selected);
},
errorCatalogo);
}
So I have two different context with same view: Create and Edit. If $scope.catalogoid come null I present a Create View and it come with value is an Edit View.
Problem is into Edit View, I want to present a select of actual value of Id instead first value. How can I do that?
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
Context
I have two tables:
Firmtable : ID (string), Firm(string)
Firms table:
FirmID(string FK), Name(string)
That I want to do is to select one value of Firm table and get it to my controller Firm to finally do a query depending of Firms value received
View
<select ng-change="filtro(selected)" ng-init="Banks= Firm[0]" ng-model="selected" ng-options="item.Namefor item in Firms">
</select><br/>
JS
function GetFirm() {
apiService.get("../../api/Firms/", null,
function (res) {
$scope.Firm= res.data;
$scope.selected = $scope.Firms[0];
}, errorFirm);
}
Controller I want to get value selected
public HttpResponseMessage GetFirm(HttpRequestMessage request, string firm)
{
//some code here
}
So how can I received selected value into string firm? , I think is another function of JS but I´m really lost there
Note: Method whehre I want to received string firm is into
apiService.get(../../api/Firm/"
You can just use the ng-change and pass the selected value,
So inside your controller,
$scope.filtro = function(selected){
apiService.get(../../api/Estatus/+selected.Nombre ;
}
I´m working in Angular and I have fields to fill like
I fill my select list as:
function cargarCatalogo() {
apiService.get("../../api/Catalogos/",
null,
function(res) {
//console.log(res.data);.
$scope.Catalogos = res.data;
$scope.selected = $scope.Catalogos[0];
},
errorCatalogo);
}
I want to know how can I pass selected Value into url in my funcion:
function actualizar(vehiculo) {
$scope.vehiculo.Origen = $scope.usuario.Origen;
$scope.vehiculo.Version = $scope.Version;
apiService.post("../../api/AddCatalogoRegistro/" + selected.ID,
function(res) {
// my code
How can I pass that selected value as a selected.ID, chrome console throw me
ReferenceError: selected is not defined
View:
<select class="form-control" ng-change="filtro(selected)" ng-init="Catalogos[0]" ng-model="selected" ng-options="item.Nombre for item in Catalogos">
<option></option>
</select>
Use $scope.selected as ng-model value
<select class="form-control" ng-change="filtro(selected)"
ng-init="Catalogos[0]" ng-model="selected"
ng-options="item.Nombre for item in Catalogos">
It should solve your problem. And the best practise is to name the controller and use ng-model = "ctrlName.selected"
I need to select option in combobox from ajax loaded data. That data comes as list of objects. The problem is that ng-option compares objects by reference and thus setting model to objects element results in appearing new empty option in combobox instead of selecting correct option.
The known workaround is to use track by expression.
And here is example code:
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.roles =[
{ key:"administrator", value:"ROLE_ADMIN" },
{ key:"operator", value:"ROLE_OPERATOR" },
];
// this emulates data from server
// won't work without 'track by'
$scope.role={ key:"administrator", value:"ROLE_ADMIN" };
});
Template:
<body ng-app="myApp" ng-controller="myCtrl">
0: <input ng-model="roles[0].key" />
<br>
1: <input ng-model="roles[1].key" />
<br>
select role: <select ng-model="role" ng-options="r.key for r in roles track by r.value">
</select>
<pre>selected role={{role|json}}</pre>
</body>
Here another problem arises. When one selects role in combobox and then
changes it's "key" property in textbox, then selected role stays unchanged. So it looks like binding is suddenly gets broken.
https://jsfiddle.net/xLqackxw/8/
from Angular documentation https://docs.angularjs.org/api/ng/directive/ngOptions
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
So:
<select ng-model="role" ng-options="r as r.key for r in roles track by r.value"></select>
'$scope.role' value will be object like { key:"administrator", value:"ROLE_ADMIN" } or { key:"operator", value:"ROLE_OPERATOR" }
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.