Populate a select with ajax with ng-options using AngularJs - angularjs

With angularJS, I need populate a select with data coming from a ajax call.
I have a controlller called "TabPacProfissionalController".In this controller I do a ajax call to get json data('profissionais object').
So far so good.
My problem is that I get the json data returning from server, but my select is never populate.
What am I missing here?
My ajax return is:
{"results":[{"nr":"8","nome":"AAAAAAAAAAAA"},
{"nr":"17","nome":"BBBBBBB"},
{"nr":"27","nome":"BBBBBAAAAA"},
,{"nr":"1004","nome":"CCCCCCCCC"}]}
HTML
<div class="form-group">
<label for="paciente.texto.sexo" class="col-sm-2 control-label">Profissional:</label>
<div class="col-sm-10" ng-controller="TabPacProfissionalController as tabProfCtrl">
<select class="form-control" ng-model="selectedProf" ng-options="nome for (nr,nome) in tabProfCtrl.profissionais">
<option value=''>Select an option</option>
</select>
</div>
</div>
JS:
app.controller('TabPacProfissionalController', function($http) {
this.profissionais = {};
$http.get('/getStaff?tipoProf=1').then(function(response){
this.profissionais=response.data.results;
console.log(this.profissionais.toString());
},function(error){
console.log(error);
});
});

If you want the label to display the nome property and the value to be the nr property try the following:
<div class="form-group">
<label for="paciente.texto.sexo" class="col-sm-2 control-label">Profissional:</label>
<div class="col-sm-10" ng-controller="TabPacProfissionalController as tabProfCtrl">
<select ng-model="tabProfCtrl.selectedProf" ng-options="profissionais.nr as profissionais.nome for profissionais in tabProfCtrl.profissionais">
<option value="">Select</option>
</select>
</div>
</div>
(key,value) notation you are using is for object data sources, as in if you wanted to iterate through the properties of a single object, rather than a collection of objects which is what you seem to be getting from the $http call.
To see the parsed server response, you could use angular.fromJson(response.data)
Here is a plunker demonstrating the functionality.

Related

How to Print json data using multiselect.js drop down with angular js

How to print my json data inside users drop down (user-friendlier drop-in replacement using multiselect.js with angular js)
My Json Data like this :
[{"name":"Test Test","user_id":"21"},{"name":"fname staff lname stadd","user_id":"22"},{"name":"client new name lname client","user_id":"24"},{"name":"manish sharma","user_id":"25"}]
My HTML Code :
<div class="form-group">
<label for="status" class="col-sm-3 control-label">Users</label>
<div class="col-sm-6">
<select multiple="multiple" id="multiselect" multiselect name="users_id" ng-model="memo_FormData.users_id">
<option ng-repeat="option in list_users" value="{{option.user_id}}" ng-bind="option.name"></option>
</select>
</div>
</div>
i found the solution
declare blank array inside your function in angular controller
$scope.get_group_users = function()
{
$scope.list_users = [];
/*this is my factory as well as function*/
groupFactory.group_wise_get_users_list().success(function(data,status,headers){
$scope.list_users = data;
}).error(function(data,status,header,config){});
}

trying to avoid value attribute to stringify object

So here is the deal, im getting different objects from ajax request ($scope.productos - $scope.ofertas) and then using ng-foreach for both to show them so user can select multiple items (stored in $pedidoForm.productos and
pedidoForm.ofertas) and this selected items dinamically show up below with another ng-repeat showing the 'nombre' property and adding another new property and value with input but the atribute VALUE is automatically converting any object into a string, resulting in a "{property: value}" so i cant read the property correctly
<div class="row">
<span>Productos</span>
<select class="selectpicker" ng-model="pedidoForm.productos" ng-change=parse(pedidoForm.productos) multiple>
<option ng-repeat="producto in productos" value="{{producto}}"> {{producto.nombre}}
</option>
</select>
</div>
<div class="row">
<span>Ofertas</span>
<select class="selectpicker" ng-model="pedidoForm.ofertas" ng-change="test(pedidoForm)" multiple>
<option ng-repeat="oferta in ofertas" value="{{oferta}}"> {{oferta.nombre}} </option>
</select>
</div>
as I understand you need to select an object, but HTML5 select tag supports only string values. So, try to use ng-options directive:
<div class="row">
<span>Productos</span>
<select class="selectpicker"
multiple
ng-model="pedidoForm.productos"
ng-change="parse(pedidoForm.productos)"
ng-options="producto as producto.nombre for producto in productos track by producto.nombre">
</select>
</div>
<div class="row">
<span>Ofertas</span>
<select class="selectpicker"
multiple
ng-model="pedidoForm.ofertas"
ng-change="test(pedidoForm)"
ng-options="oferta as oferta.nombre for oferta in ofertas track by oferta.nombre">
</select>
</div>
plunker: http://plnkr.co/edit/jl1cayWXif7fukQRviTw?p=preview

Dropdown2 data from REST call initiated by Dropdown1 does not load in Angular JS

I have 2 dropdown's! The first one has static data which has ng-change directive that calls a service method. This method calls a REST API, gets data passes it on to the controller where it sets the value of a certain array from response to a variable in scope.(like $scope.secondDropDownData= valueFromJSON).
I am using the secondDropDownData to load the second dropdown data. In the logs i see the data is received from REST call, but it does not load in the dropdown.
Below is the code i am using :
<div ng-app="appName" ng-init="loading=true; angularLoaded=true">
<div class="container" ng-controller="controller1">
<div class="row" id="exSelects">
<div class="col-sm-6">
<h4>Dropdown1</h4>
<select id="x" ng-model="modelVal" ng-change="getSecondDropDown(inputVal)" class="form-control">
<option ng-repeat="x in xyz">{{x}}</option>
</select>
</div>
<!--/col-->
<div class="row" id="exSelects">
<div class="col-sm-6">
<h4>Dropdown2</h4>
<select ng-model="dropdwn2" class="form-control">
<option ng-repeat="a in abc" value="{{a.id}}">{{a.name}}</option>
</select>
</div>
</div>
<!--/row-->
</div>
Solved this issue. It was happening because i was using rootscope for the controller method that calls the REST service and gets the data, but used scope to set the value.
Now i am using same scope to declare the controller method and also set the variable i am using in second dropdown.

cannot set option of the select using angular js code?

I had following html
<div class="form-group ">
<label class="col-sm-3 control-label">Role</label>
<div class=" col-sm-8">
<select type="text" id="role" name="role" ng-model="role" class="form-control" required>
<option value="">Select Role</option>
<option ng-repeat="rol in rolelist" value="{{rol.id}}">{{rol.title}}</option>
</select>
<p class="ng-invalid" ng-show="addForm.role.$error.required">Role need to selected</p>
</div>
</div>
I want to set value of role dynamically clicking data-sets for the purpose of update and setting value of dom element (control); to do so i had following code inside controller
$scope.data_set=function(id)
{
BlockUi();
url=siteurl+'/admin/'+module+'/get-info';
$http({
url : url,
method : "POST",
data : {"id":id}
}).then(function(responseText){
data=responseText.data;
$scope.first_name=data.first_name;
$scope.user_id=data.id;
$scope.last_name=data.last_name;
$scope.user_name=data.user_name;
$scope.role=data.role;
$scope.email=data.email;
$scope.contact_number=data.contact;
$scope.image_file=data.image;
$scope.status=data.status;
UnblockUi();
},function(error){
UnblockUi();
UnknownError();
alert(JSON.stringify(error));
});
}
above code works for all but role model; I watched and follow other question's solutions but did not work for me?
and ng-required error is removed after this code;
May I suggest you look into the ng-options directive? You'll want to do something along the lines of:
<select ng-model="role" ng-options="rol as rol.Title for rol in rolelist">
<option value="">Select Role</option>
</select>
thanks for effort of everybody
Actually i strayed every where, but solution is simple ; its problem with datatype; actually select: role model contains string datatype and always ; i am setting the integer datatype to role model which is wrong; i convert the datatype of the data of json to string and set the value of role model works fine.

AngularJS ng-options not populating

I have an array of objects that I bind to the scope. My view then accesses the objects via ng-options like this:
<div class="tile block box-shadow">
<form role="form">
<div class="form-group">
<label>Reason for change</label>
<select class="form-control" ng-options="item.value as item.description for item in controller.priceChangeReasons" />
</div>
</form>
</div>
but the dropdown has nothing when you select it.
I have logged the priceChangeReasons and can see that the array is working and returning values.
I have made a codepen to show the issue:
http://codepen.io/r3plica/pen/XbQzMa?editors=101
I realise this is probably a syntax error on my part, but I can't see it.
Can someone help?
ngOptions directive requires ngModel, just add:
<select class="form-control" ng-options="item.value as item.description for item in controller.priceChangeReasons" ng-model="controller.reason" />
and all should work

Resources