I have an MVC5 Controller that loads and object and sends it to a View for editing. The Edit form view has a dropdown control containing US States which is bound to an AngularJS Controller property called containing an array of states.
I want set the AngularJS property $scope.SelectedState from the View Model so that the dropdown displays the correct state. I cannot find a way to pass the MVC Model State Value cleanly to the AngularJS Controller Property. Thanks
$scope.SelectedState= {{I want to set this value from the MVC Model}};
HTML Below
<label for="States" class="control-label col-md-2">States</label>
<div class="controls col-md-4">
<select ng-model="SelectedState" id="States" class="form-control" ng-options="st.abbreviation + ' - ' + st.name for st in States.USStates track by st.abbreviation">
<option value="">-- Choose State --</option>
</select>
<input type="hidden" id="SelectedState" name="SelectedState" value="{{SelectedState}}" />
</div>
Here is a Plunker demo of the solution:
<label for="States" class="control-label col-md-2">States</label>
//convert your Model.State to Json and set States using ng-init
<div class="controls col-md-4" ng-init="States = #Html.Raw(Json.Encode(Model.State))">
<select ng-init=n g-model="SelectedState" id="States" class="form-control" ng-options="st.abbreviation + ' - ' + st.name for st in States.USStates track by st.abbreviation">
<option value="">-- Choose State --</option>
</select>
<input type="hidden" id="SelectedState" name="SelectedState" value="{{SelectedState}}" />
</div>
In the html: <div ng-init="SelectedState = #(Model.SelectedState)"></div>
Replace #(Model.SelectedState) with whatever from your MVC model. My example is in Razor.
Related
i ust use ng-options in a select element in angular js. and in select select i just wants to add a extra options at the beginning of options.my code ===>
<div class="form-group">
<select class="form-control select2" ng-options="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
</select>
</div>
that is not working for me ? i dont know why.then i search on net and found some solution like =>
angularJS - add a Static option with ng-options
Add two extra options to a select list with ngOptions on it
Angular ng-options - Is there a way to add an option when the model contains a value not present in the options list?
after see above solutions i tried =>
<div class="form-group">
<select class="form-control select2" ng-options="" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
<option ng-repeat="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id">{{(o.fullName+' ('+o.email+')')}}</option>
</select>
</div>
after doing this this is also showing something like =>
but that is also not working for me i dont know why? can anybody help me ???
Using AngularJS, there is a requirement to show a dropdown with a selected value:
- When user selects a different value we should show a warning message and shouldn't proceed with update (save button disable).
- When user reverts to the original value, the message should hide and able to update (save button enable)
<select ng-model="vm.sldetails.AgencyGroupID" onchange=""
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
<label ng-show="">Warning message</label>
Instead of calling an event in controller, can we achieve directly in Onchange event?
<div class="col-md-2">
<select class="form-control" ng-model="vm.sldetails.AgencyGroupID"
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
</div>
HTML:
<label class="col-md-2 control-label text-align-left" id="lblWarningMessage" ng-if="vm.sldetails.AgencyGroupID==='your value'">Warning message</label>
In label tag,your value should be replaced by ur compare value
I guess you could try something like this:
<select ng-model="vm.sldetails.AgencyGroupID" ng-change="vm.selectChanged()"
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
<label ng-show="vm.showWarning">Warning message</label>
And in js:
vm.selectChanged = function(){
if(vm.sldetails.AgencyGroupID !== 'the initial value'){
vm.showWarning = true;
}else{
vm.showWarning = false;
}
}
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.
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
I'm developing an app in mobile-angular-ui (angular+bootstrap).
In my login page, users can remember their credentials (username and password). Users' data ara saved in the localStorage.
That works fine. I can load users in my login page using datalist:
<form name="userForm">
<div class="form-group" ng-class="{ 'has-error' : submitted && userForm.username.$invalid && !userForm.username.$pristine }">
<label for="inputEmail" class="control-label">Username</label>
<input type="text" class="form-control" id="inputEmail"
name="username" ng-model="user.username" list="UserMemoList"
required>
</div>
<datalist id="UserMemoList">
<option ng-repeat="item in userMemoList track by $index" ng-click="setChange(item)"
value="{{item.username}}" >
</option>
</datalist>
I can select the item.username I want, but I'm not able to select the corresponding item.password.
My problem is that datalist doesn't work like select, and i cannot use ng-options. I have to use option+value to pass my value to the input.
<div class="form-group" ng-class="{ 'has-error' : submitted && userForm.password.$invalid && !userForm.password.$pristine }">
<label for="inputPassword" class="control-label">Password</label>
<input name="password" type="password" class="form-control" id="inputPassword"
ng-model="user.password" required>
</div>
I would be able to use a ng-change="theSelectedUserIs(item)", but I'm not able to pass the item object, because datalist is related to the username input, so I need to pass item.username.
Any idea?
I don't want to use typeahead because actually is deprecated in bootstrap3 or add other libraries/js/css.
I would like to do that only using angular and html.
My controller:
$scope.userMemoList = JSON.parse(localStorage.getItem('userList'));
var user = {};
LoginService.setUser(user);
userMemoList is an array of object like:
{"username":"admin", "password":"admin"}, ...
Thanks.
You can also pass with html data-id like so
in your angular js file
// when input name textbox change, check the value is same with datalist value or not. If value same, then bind that item.password to angular password model.
$scope.$watch "user.username", (newValue) ->
if newValue != null && newValue.lenght > 0
$("#locationlist option").each (index) ->
if $(this).val() == newValue
$scope.user.password = $(this).data("id") // this line will set your password text field
in your view
// pass user password via html5 (data-id) element like below
<datalist id="UserMemoList">
<option ng-repeat="item in userMemoList track by $index" ng-click="setChange(item)"
value="{{item.username}}" "data-id" = {{item.password}} >
</option>
</datalist>
This is how I solved this problem in my app. Use to wrap .
<input class="input form-control" placeholder="Search Conf by Application ID"
list="app_ids" ng-model="confs_app_id"/></th>
<datalist id="app_ids">
<select>
<option ng-repeat="app in app_list" value="{{app}}"></option>
</select>
</datalist>