There is a dropdown in my view. When I select an item in dropdown, ajax should load. So there is a table locations and it has one to many relation with contacts.
So when I select a location from locations dropdown, contact corresponding to that should load. But it is not happening.
controller:
public function location_contacts()
{
$contacts = Contact::all();
return view('partials.bookavisit_contact')->with(['contacts' => $contacts]);
}
location dropdown:
<div class="inline-control location-icon dropdown-icon">
<select class="form-control" name="visit-location" id="visitLocation" onChange="getContact(value);" >
<option date-person="lorem impsum" date-mail="lorem.ipsum#gmail.com" >Select Location</option>
#foreach($locations as $location)
<option date-person="lorem impsum" date-mail="lorem.ipsum#gmail.com" value="{!! $location->id !!}" >{!! $location->address !!}, {!! $location->city !!}, {!! $location->state !!}</option>
#endforeach
</select>
</div>
script:
#section('scripts')
<script type="text/javascript">
function getContact(val) {
var ajaxUrl = "/location_contacts";
$.ajax({
type: "POST",
url: ajaxUrl,
data:'location_id='+val,
success: function(data){
$("#contact").html(data);
}
});
}
</script>
#endsection
partial view of contact:
<div id="location-contact-info">
<div class="content-head" id="contact">
<h5 class="wow fadeInUp">Lorem ipsum</h5>
</div>
#foreach($contacts as $contact)
<div class="contact-info-group row">
<div class="contact-label">Contact Person:
<span id="location-contact-name">{{$contact->first_name}} {{$contact->last_name}}</span>
</div>
</div>
<div class="contact-info-group row">
<div class="contact-label">Email:
<span id="location-contact-mail" >{{$contact->email}}</span>
</div>
</div>
#endforeach
</div>
You have a mistake in your html, your ID contact is in your partial and need's to be in your main view like this:
<div class="inline-control location-icon dropdown-icon">
<select class="form-control" name="visit-location" id="visitLocation" onChange="getContact(value);" >
<option date-person="lorem impsum" date-mail="lorem.ipsum#gmail.com" >Select Location</option>
#foreach($locations as $location)
<option date-person="lorem impsum" date-mail="lorem.ipsum#gmail.com" value="{!! $location->id !!}" >{!! $location->address !!}, {!! $location->city !!}, {!! $location->state !!}</option>
#endforeach
</select>
</div>
<div id="contact"></div>
For that reason the $("#contact").html(data); doesn't work.
Try with that.
Regards
Related
first I have a form that placed inside a modal, this is the form:
<form id="kt_modal_add_menu_form" class="form" action="{{route('administrator....')}}" method="POST">
#csrf
{{-- begin: scroll --}}
<div class="d-flex flex-column scroll-y me-n7 pe-7" id="kt_modal_add_menu_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_menu_header" data-kt-scroll-wrappers="#kt_modal_add_menu_scroll" data-kt-scroll-offset="300px">
<div class="fv-row mb-7">
<label class="required fw-semibold fs-6 mb-2">Menu Name</label>
<input id="menu-name" type="text" name="menu_name" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Menu Name" />
</div>
<div class="fv-row mb-7">
<label class="fw-semibold fs-6 mb-2">Module Name</label>
<select name="module_name" aria-label="Select the module" data-control="select2" data-placeholder="Select module" class="form-select form-select-solid"
data-dropdown-parent="#kt_modal_add_menu_scroll" id="select-module-name">
<option value="New Module" selected>New Module</option>
#foreach ($allModule as $module)
<option value="{{$module->module_name}}">
<b>{{$module->module_name}}</b>
</option>
#endforeach
</select>
</div>
<div class="fv-row mb-7">
<label class="fw-semibold fs-6 mb-2">Parent</label>
<select name="parent_id" aria-label="Select the Parent" data-control="select2" data-placeholder="Select parent" class="form-select form-select-solid"
data-dropdown-parent="#kt_modal_add_menu_scroll" id="select-parent">
<option value=""></option>
</select>
</div>
<div class="fv-row mb-7">
<label class="fw-semibold fs-6 mb-2">Routes Name</label>
<input id="route-name" type="text" name="routes_name" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Routes Name e.g. administrator.menu.menu-list-page" />
</div>
<div class="fv-row mb-7">
<label class="fw-semibold fs-6 mb-2">Routes URL</label>
<input id="route-url" type="text" name="url_routes" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Routes URL e.g. modules/parent/url_name" />
</div>
</div>
{{-- end: scroll --}}
<div class="text-center pt-15">
<button type="reset" class="btn btn-light me-3" data-kt-users-modal-action="cancel">Discard</button>
<button type="submit" class="btn btn-primary" data-kt-users-modal-action="submit">
<span class="indicator-label">Submit</span>
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
</div>
<div class="text-left pt-10">
<p>
note:<br>........
</p>
</div>
</form>
inside the form there is a field id="select-module-name", after this menu selected, it will get from ajax to fill the selection for the next field with:
// after selecting module, show menu with parent_id == module menuID
$("#select-module-name").change(function () {
var moduleName = $(this).val();
const selectParent = document.querySelector('#select-parent');
// empty the select-parent options, then add the default empty select
$('#select-parent').empty();
selectParent.add(new Option('',''));
if(moduleName != null && moduleName != "New Module"){
$.ajax({
type: "GET",
url: "/administrator.......,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response) {
response.forEach(function (parentData) {
var option = new Option(parentData.menu_name, parentData.id);
selectParent.add(option, undefined);
});
}
});
}
});
it works fine when creating a new menu,
but when edit, I want to get the prefilled form.
The only one got problem is the select with id="select-parent", this below is the code event when I click edit on selected menu:
// edit menu button eventListener
$(".edit-menu").click(function () {
var menuID = $(this).data('id');
console.log(menuID);
$.ajax({
type: "GET",
url: "/administrator.......,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response) {
console.log(response);
$("#menu-id").val(response.id);
$("#menu-name").val(response.menu_name);
$("#route-name").val(response.routes_name);
$("#route-url").val(response.url_routes);
$("#select-module-name").val(response.module_name).trigger("change");
if(response.parent_id != 0){
$("#select-parent").val(response.parent.menu_name).trigger("change");
// $('#select-parent').val(menuData.parent_id).trigger("change.select2");
// $("#select-parent").select2('data', {id: menuData.parent.module_name, text: menuData.parent.module_name});
}
n.show();
}
});
});
basically, there is 2 select2, but the second select2 is getting the value after the first got selected.
And the problem is the #select-parent (second select2) wont get selected within the value, data is valid but still the select option wont get selected, happen when edit (prefilled form)
thank you in advance if any solution from anyone
$("#select-parent").val(response.parent.menu_name).trigger("change");
$('#select-parent').val(menuData.parent_id).trigger("change.select2");
$("#select-parent").select2('data', {id: menuData.parent.module_name, text: menuData.parent.module_name});
I have tried this 3 option, and even try using setTimeout,
have been suffered this pain for over than 2 weeks XD
I had some problems with the task. I'm not very good with javascript. Please help.
I display categories as form and I want to when the form to be typed to display products that are set for each category and sub-category. In the next task I have to make sure that when the form is typed, the categories show up and, also without refreshing the page.
code on product_upload.blade.view
<div class="form-group row" id="category">
<label class="col-md-3 col-from-label">{{translate('Category')}}</label>
<div class="col-md-8">
<select class="form-control aiz-selectpicker" name="category_id" id="category_id" data-live-search="true" required>
#foreach($categories as $category)
<option value="{{$category->id}}">{{ $category->getTranslation('name') }}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group row" id="subcategory">
<label class="col-md-3 col-from-label">{{translate('Subcategory')}}</label>
<div class="col-md-8">
<select class="form-control aiz-selectpicker" name="subcategory_id" id="subcategory_id" data-live-search="true" required>
</select>
</div>
</div>
My script :
function get_subcategories_by_category(){
var category_id = $('#category_id').val();
$.post('{{ route('subcategories.get_subcategories_by_category') }}',{_token:'{{ csrf_token() }}', category_id:category_id}, function(data){
$('#subcategory_id').html(null);
for (var i = 0; i < data.length; i++) {
$('#subcategory_id').append($('<option>', {
value: data[i].id,
text: data[i].name
}));
$(".aiz-selectpicker").selectpicker();
}
get_subsubcategories_by_subcategory();
});
}
$('#category_id').on('change', function() {
get_subcategories_by_category();
});
$('#subcategory_id').on('change', function() {
get_subsubcategories_by_subcategory();
});
and my controller :
public function get_subcategories_by_category(Request $request)
{
$subcategories = SubCategory::where('category_id', $request->category_id)->get();
return $subcategories;
}
But that wont work.
I am developing a form in laravel that shows products and projects of a certain department. I need to create a function in js/ajax so I can allow users to choose a product, and once that happens, the project field in the form should show a drop-down menu of all the projects related to that product. How can I do that? Below is the code for the form, which has two fields (Produto) and (Projeto).
<form action="/arquiteturas/store" method="post" role="form" class="form-horizontal">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group {{$errors->has('combo_produto')? ' has-error' : '' }}">
<label class="col-md-2 control-label">Product</label>
<div class="col-md-8">
<select class="form-control search-select" name="combo_produto"
id="combo_produto">
<option value="0">Choose</option>
#foreach($produtos as $value)
<option #if(old('combo_produto')==$value->id){{'selected'}}#endif value='{{$value->id}}'>{{$value->nome}}</option>
#endforeach
</select>
<span class="help-block">
#if($errors->has('combo_produto'))
#foreach ($errors->get('combo_produto') as $error)
<b>{{$error}}</b>
#endforeach
#endif
</span>
</div>
</div>
<!--Projet.-->
<div class="form-group {{$errors->has('combo_projeto')? ' has-error' : '' }}">
<label class="col-md-2 control-label">Project</label>
<div class="col-md-8">
<select class="form-control search-select" name="combo_projeto" id="combo_projeto">
<option value="0">Choose</option>
#foreach($produtos as $value)
<option #if(old('combo_projeto')==$value->id){{'selected'}}#endif value='{{$value->id}}'>{{$value->nome}}</option>
#endforeach
</select>
<span class="help-block">
#if($errors->has('combo_projeto'))
#foreach ($errors->get('combo_projeto') as $error)
<b>{{$error}}</b>
#endforeach
#endif
</span>
</div>
</div>
I am sharing an excerpt of code for a similar funcionality of a form in which the user selects a product from a dropdown menu. Once that happens, a list of related branches is shown in the branch dropdown menu.
loadProdutos()
$("#combo_produto" ).change(function() {
clearCampos('combo_branch')
if(checkItemSel('combo_produto')){
$('#div_produto').removeClass('has-error');
$('.help-produto').empty();
var produto_id = document.getElementById('combo_produto').value
$('#combo_branch').prop("disabled", false);
loadbranchs(produto_id )
}else{
insertCombo('combo_branch', '0','Selecione')
$('#combo_branch').prop("disabled", true);
}
});
$("#combo_branch" ).change(function() {
if(checkItemSel('combo_produto')){
$('#div_branch').removeClass('has-error');
$('.help-branch').empty();
}
});
function loadProdutos()
{
var request = $.ajax({
method:"GET",
url:"/validar_fontes/request_produtos",
dataType:"json",
beforeSend: function () {
blockPage();
},
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
request.done(function(e){
if(e.status){
if(e.produtos.length>0)
{
$('#combo_produto').append('<option value="0">Selecione</option>');
$('#combo_produto').val("0").trigger("change");
for(var i=0;i<e.produtos.length;i++)
{
$('#combo_produto').append('<option value="'+e.produtos[i]['id']+'">'+e.produtos[i]['nome']+'</option>');
}
}else
{
$('#combo_produto').append('<option value="0">Nenhum produto encontrado</option>');
$('#combo_produto').val("0").trigger("change");
}
}
});
}
function loadbranchs(produto_id)
{
var request = $.ajax({
method:"GET",
url:"/validar_fontes/request_branchs",
data:{produto_id : produto_id},
dataType:"json",
beforeSend: function () {
blockPage();
},
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
request.done(function(e){
if(e.status){
if(e.branchs.length>0)
{
$('#combo_branch').append('<option value="0">Selecione</option>');
$('#combo_branch').val("0").trigger("change");
for(var i=0;i<e.branchs.length;i++)
{
$('#combo_branch').append('<option value="'+e.branchs[i]['id']+'">'+e.branchs[i]['nome']+'</option>');
}
}else
{
$('#combo_branch').append('<option value="0">Nenhuma branch encontrada</option>');
$('#combo_branch').val("0").trigger("change");
}
}
});
}
You have to create a end point (server side method in laravel) which will take the "producto" and return all "projecto" related to selected "producto"
Then on change event of "producto" dropdown in javascript/jquery you need to call the avobe created method and pass the producto value.
The projecto list should be key value pair so that it can be populated in dropdown projecto
Here is a draft page what you are trying to achieve, let me know if you can understand by this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type = "text/javascript">
function PopulateContinents() {
var producto = $('#combo_produto').val();
if (producto == "") {
alert("Please select a valid product");
}
else {
$('producto').empty().append('<option selected="selected" value="0">Loading...</option>');
$.ajax({
type: "POST",
url: pageUrl + '<enter the url of server method created>',
data: '{producto: ' + producto + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(datas){
for(i=0; i<datas.length; i++)
{
$('#combo_projeto options').append("<option value='"+datas[i].Value+"'>"+datas[i].Text+"</option>");
}
},
failure: function (response) {
alert(response.d);
}
});
}
}
</script>
<form action="/arquiteturas/store" method="post" role="form" class="form-horizontal">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group {{$errors->has('combo_produto')? ' has-error' : '' }}">
<label class="col-md-2 control-label">Product</label>
<div class="col-md-8">
<select class="form-control search-select" name="combo_produto"
id="combo_produto">
<option value="0">Choose</option>
#foreach($produtos as $value)
<option #if(old('combo_produto')==$value->id){{'selected'}}#endif value='{{$value->id}}'>{{$value->nome}}</option>
#endforeach
</select>
<span class="help-block">
#if($errors->has('combo_produto'))
#foreach ($errors->get('combo_produto') as $error)
<b>{{$error}}</b>
#endforeach
#endif
</span>
</div>
</div>
<!--Projet.-->
<div class="form-group {{$errors->has('combo_projeto')? ' has-error' : '' }}">
<label class="col-md-2 control-label">Project</label>
<div class="col-md-8">
<select class="form-control search-select" name="combo_projeto" id="combo_projeto">
<option value="0">Choose</option>
#foreach($produtos as $value)
<option #if(old('combo_projeto')==$value->id){{'selected'}}#endif value='{{$value->id}}'>{{$value->nome}}</option>
#endforeach
</select>
<span class="help-block">
#if($errors->has('combo_projeto'))
#foreach ($errors->get('combo_projeto') as $error)
<b>{{$error}}</b>
#endforeach
#endif
</span>
</div>
</div>
</body>
</html>
I have a modal window used to update or add a new object Store.
This modal is called remotely which information is loaded from a GET method constructed in ASP.NET.
Button that calls the modal:
<div class="btn-group" id="modalbutton">
<a id="createEditStoreModal" data-toggle="modal" asp-action="Create"
data-target="#modal-action-store" class="btn btn-primary">
<i class="glyphicon glyphicon-plus"></i> NEW STORE
</a>
</div>
Html of the modal:
#model Application.Models.ApplicationviewModels.StoreIndexData
#using Application.Models
<form asp-action="Create" role="form">
#await Html.PartialAsync("_ModalHeader", new ModalHeader
{ Heading = String.Format("Actualización de Modelo: Tiendas") })
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="modal-body form-horizontal">
<div class="form-group">
<label asp-for="DepartmentID" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="DepartmentID" class="form-control"
asp-items="#(new SelectList(#ViewBag.ListofDepartment,"DepartmentID","DepartmentName"))"></select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Distrito</label>
<div class="col-md-10">
<select class="form-control" id="DistrictID" name="DistrictID" asp-for="DistrictID"
asp-items="#(new SelectList(#ViewBag.ListofDistrict,"DistrictID","DistrictName"))"></select>
</div>
</div>
{... more elements}
</div>
</form>
GET Method:
public IActionResult Create(int? id)
{
List<Department> DepartmentList = new List<Department>();
DepartmentList = (from department in _context.Departments
select department).ToList();
DepartmentList.Insert(0, new Department { DepartmentID = 0, DepartmentName = "-- Seleccione Departamento --" });
ViewBag.ListofDepartment = DepartmentList;
StoreIndexData edit = new StoreIndexData();
List<District> ListofDistrict = new List<District>();
ListofDistrict.Insert(0, new District { DistrictID = 0, DistrictName = "-- PRUEBA --" });
ViewBag.ListofDistrict = ListofDistrict;
return PartialView("~/Views/Shared/Stores/_Create.cshtml");
}
The problem:
I have the following jQuery which asigns a value to DistrictID once the modal opens:
<script type="text/javascript">
var wasclicked = 0;
var $this = this;
$(document).ready(function () {
document.getElementById("modalbutton").onclick = function () {
//is AddNew Store button is hitted, this var = 1
wasclicked = 1;
};
$('#modal-action-store').on('hidden.bs.modal', function () {
//global.wasclicked = 0;
wasclicked = 0;
$(this).removeData('bs.modal');
});
$('#modal-action-store').on('shown.bs.modal', function (e) {
console.log($('#DistrictID').length);
//if wasclicked equals 1 that means we are in the AddNew Store scenario.
if (wasclicked == 1) {
//a default value is sent to District dropdownlist
var items = "<option value='0'>-- Seleccione Distrito --</option>";
$('#DistrictID').html(items);
};
});
});
</script>
The problem right now is that after this line jQuery is executed, the value that was assigned to DistrictID gets overwritten by :
ViewBag.ListofDistrict = ListofDistrict; //"-- PRUEBA --"
And this line is lost:
var items = "<option value='0'>-- Seleccione Distrito --</option>";
What I suspect is that the information coming from the Controller overwrites any result from jQuery over the in the modal.
After debugging I have identified three diferent moments:
Moment 1: First time we open the modal
The modal hasn't opened yet and the jQuery executes
For this reason it does not identify DistrictID
The result from the GET Action fills the modal's inputs.
Moment 2 - Part 1: Second time we open the modal
This time the modal opens before the jQuery is executed
The DistrictID has the value from the GET Method before we assign the value from jQuery
Moment 2 - Part 2: When the value from jQuery is assigned
The value from jQuery is assigned to DistrictID
This value will be overwritten by the result of the GET Action
Question:
Can anyone explain or help me understand what might be causing this? What else can I do to identify the reason behind this?
Trying moving the assigning of html to districtID from your main view to the document.ready of modal popUp view.
#model Application.Models.ApplicationviewModels.StoreIndexData
#using Application.Models
<form asp-action="Create" role="form">
#await Html.PartialAsync("_ModalHeader", new ModalHeader
{ Heading = String.Format("Actualización de Modelo: Tiendas") })
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="modal-body form-horizontal">
<div class="form-group">
<label asp-for="DepartmentID" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="DepartmentID" class="form-control"
asp-items="#(new SelectList(#ViewBag.ListofDepartment,"DepartmentID","DepartmentName"))"></select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Distrito</label>
<div class="col-md-10">
<select class="form-control" id="DistrictID" name="DistrictID" asp-for="DistrictID"
asp-items="#(new SelectList(#ViewBag.ListofDistrict,"DistrictID","DistrictName"))"></select>
</div>
</div>
{... more elements}
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
//if wasclicked equals 1 that means we are in the AddNew Store scenario.
if (wasclicked == 1) {
//a default value is sent to District dropdownlist
var items = "<option value='0'>-- Seleccione Distrito --</option>";
$('#DistrictID').html(items);
}
});
</script>
PS: Default option can be also be used. refer the below code.
<div class="form-group">
<label class="col-md-2 control-label">Distrito</label>
<div class="col-md-10">
<select class="form-control" id="DistrictID" name="DistrictID" asp-for="DistrictID" asp-items="#(new SelectList(#ViewBag.ListofDistrict,"DistrictID","DistrictName"))">
<option value='0'>-- Seleccione Distrito --</option>
</select>
</div>
</div>
modal() only accepts an options object or a string. To append elements to your modal, we can append them when the show.bs.modal is triggered:
$('#modal-action-store').on('show.bs.modal', function(e){
var items = "<option value='0'>-- Seleccione Distrito --</option>";
$('#DistrictID').html(items);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" id="modalbutton">
<a id="createEditStoreModal" data-toggle="modal" asp-action="Create"
data-target="#modal-action-store" class="btn btn-primary">
<i class="glyphicon glyphicon-plus"></i> NEW STORE
</a>
</div>
<div class="modal" id="modal-action-store">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<select class="form-control" id="DistrictID" name="DistrictID">
</select>
</div>
</div>
</div>
</div>
I would update your http://plataformafantasypark.azurewebsites.net/Stores/create to contain <option value='0'>-- Seleccione Distrito --</option> by default. This would limit the options to overwrite the element with zero entries.
This would make your js code easier too.
By the way, why do you use document.getElementById("modalbutton").onclick when you can use $("#modalbutton").on("click", function(){}); because you are using jQuery for everything else.
I am using below code.
HTML code
<form name="profInfoForm" ng-submit="saveInfo(profInfoForm)" novalidate>
<div class="wrapper">
<div class="container">
<section class="main-ctr">
<div class="error-msg" ng-show="showErrorMsg">
<div class="text">Please fix the validation error(s) below and try again.<br />{{serviceErrorMsg}}</div>
</div>
<div ng-include="'views/header.html'"></div>
<main class="sm-main">
<section class="fix-section">
<h1>Professional information</h1>
<div class="lg-form">
<div class="form-group">
<label class="text-label lg-label">Salutation</label>
<div class="select-wrap lg-select">
<select class="form-input select" name="salutation" required ng-init="profInfo.salutation = item[0]"
ng-options="item.name as item.name for item in salutations"
ng-model="profInfo.salutation">
</select>
<div class="error" ng-show="profInfoForm.$submitted || profInfoForm.salutation.$touched">
<span ng-show="profInfoForm.salutation.$error.required">Required Field</span>
</div>
</div>
</div>
</div>
</section>
<div class="clear"></div>
<div class="button-ctr">
<button class="button" ng-class="profInfoForm.$valid ? 'active' : 'disable'">Next</button>
</div>
</main>
</section>
</div>
</div>
<div id="loading" ng-if="showLoader">
<img src="images/loader.gif" id="loading-image">
</div>
</form>
My constant.js
.constant('APP_CONSTANTS', {
SALUTATIONS: [{ id: 0, name: 'Select' }, { id: 1, name: 'Mr.' }, { id: 2, name: 'Mrs.' }, { id: 3, name: 'Miss' }, { id: 4, name: 'Dr.' }, { id: 5, name: 'Ms'}]
})
Controller code is given below
.controller('professionalInfoCtrl', ['$rootScope', '$scope', '$state', 'globalService', 'APP_CONSTANTS', 'dataServices', function ($rootScope, $scope, $state, globalService, APP_CONSTANTS, dataServices) {
$scope.showLoader = false;
$scope.profInfo = userData;
$scope.salutations = APP_CONSTANTS.SALUTATIONS;
}])
I want to set default value of Salutation drop down list.
For this I am using ng-init but this is not working. I did not to find out the problem.
Please consider using ui-select of AngularUI:
<ui-select ng-model="$parent.company">
<!-- using $parent - https://github.com/angular-ui/ui-select/issues/18 -->
<ui-select-match>{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="company in companies>{{company.name}}</ui-select-choices>
</ui-select>
I resolved my issue by using below code
<select class="form-input select" ng-model="profInfo.salutation" required
ng-options="item.name as item.name for item in salutations">
<option value="">Select salutation...</option>
</select>
<div class="error" ng-show="profInfoForm.$submitted || profInfoForm.salutation.$touched">
<span ng-show="profInfoForm.salutation.$error.required">Required Field</span>
</div>
As simple I am using
<option value="">Select salutation...</option>
Thanks everyone.