I am developing mobile application with the help of Angular and Ionic.
My address data is coming like this :
var data = [{"Address":"abcd","City":"Aromas","StateName":"CALIFORNIA","Country":"United States","ZipCode":"95004"}]
So i just push this data in
$scope.Add = data;
and showed in View
<div ng-repeat="demoData in Add">
<label class="item item-input"><input type="text" placeholder="Address" ng-model="demoData.Address" name="uStreetName" required="" autocomplete="off"/></label>
<label class="item item-input"><input type="text" placeholder="City" ng-model="demoData.City" name="uCity" required="" autocomplete="off"/></label>
<label class="item item-input item-select"><div class="input-label"> </div><select ng-model="demoData.StateID" ng-options="stateL.StateID as stateL.StateName for stateL in StateList"><option value="" disabled hidden>State</option></select></label>
<label class="item item-input item-select"><div class="input-label"> </div><select ng-model="demoData.CountryID" ng-options="countryL.CountryID as countryL.Country for countryL in CountryList"><option value="" disabled hidden>Country</option></select></label>
<label class="item item-input"><input type="text" placeholder="Zip" ng-model="demoData.ZipCode" name="uZip" required="" autocomplete="off"/></label>
</div>
<button class="button button-full button-assertive" ng-click="go(demoData)">Next</button>
I have drop down for country and state data like this :
CountryList :[{"CountryID":1,"Country":"United States"},{"CountryID":2,"Country":"Austria"},{"CountryID":3,"Country":"India"}]
StateList :[{"StateID":1,"StateName":"ALASKA"},{"StateID":2,"StateName":"ALABAMA"},{"StateID":3,"StateName":"ARKANSAS"},{"StateID":4,"StateName":"AMERICAN SAMOA"}]
My question is that, In address the state and country that are coming from API I have to show that in select input box and the user can edit the same. User are permitted to select the state and country if needed.
revised:
I am using the address API to get the address and i am auto populating the same. I want to auto populate in the select input but condition is that the user can reselect the state and country if needed.
If I understand correctly, you have the select inputs populated, but need the default value to be the one already saved against the user's address. The problem you have is that you're using CountryID and StateID as the values for the select options, but the country and state saved in the user's address are using Country and StateName.
You also need to modify the models used with the inputs, as you don't have StateID and CountryID in the data.
To fix this, change the select inputs to use the name as both the value and name, like so:
<select ng-model="demoData.StateName" ng-options="stateL.StateName as stateL.StateName for stateL in StateList">
<option value="" disabled hidden>State</option>
</select>
<select ng-model="demoData.Country" ng-options="countryL.Country as countryL.Country for countryL in CountryList">
<option value="" disabled hidden>Country</option>
</select>
Related
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;
}
}
I have some fields in an AngularJS form that need to record a total percentage. Form example;
Gender split of a group - % Males, % Females
Currently I am using a field for each gender.
<div class="form-group col-md-2">
<label for="male">% Male:<span class="error">*</span></label>
<input type="number"
name="males"
max="100"
class="form-control"
ng-model="newReport.males"
required>
</div>
<div class="form-group col-md-2">
<label for="female">% Female:<span class="error">*</span></label>
<input type="number"
class="form-control"
ng-model="newReport.females"
ng-readonly="true"
value="#{{ females() }}"
placeholder="#{{ females() }}"
required>
</div>
Then I use this function to calculate the Female %
$scope.females = function() {
return 100 - this.newReport.males;
};
However, my ng-model="newReport.females" never seems to get set. The placeholder does get the correct value from the function but won't persist since the model is not picking it up.
Is there a better way to do this? Also, once I am getting it to set the model properly, what is the best way to validate that the 2 fields add up to 100?
Thanks!
I am trying to do IBAN validation. Before this step, the user gets to input the country (5 countries in this case) and then when the user enters the IBAN, it should validate depended on the country selected. I am currently trying to use ng-iban with one country (BH), but can't seem to get it to work. Any help is appreciated and I am also open to using iban.js library if anyone can provide some helpful tips for that. My code for the country selection and IBAN field is included. Thanks!
<div class="form-group col-md-3 required">
<label class ="control-label">Country of Treatment</label>
<select class="form-control" ng-model="formDetails.Country" ng-options="lookup.ID as lookup.NAME for lookup in lookupCountry" required>
</select>
<div class="form-group col-md-3 required">
<label class ="control-label" >iBAN</label>
<input ng-model="formDetails.IbanNumber" ng-required= "formDetails.PaymentType == 'Wire' " ng-readonly="formDetails.PaymentType == 'Cheque'" class="form-control" placeholder="Enter iBAN Number" ng-iban="[BH]" >
</div>
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.
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>