Here im using Mvc with Angularjs Here im getting Data From database but why dropdown not display vale values this is my Html coding
<div class="form-group">
<div class="row">
<div class="col-md-2 col-sm-2" style="margin-left:20px">
<b>Country</b>
</div>
<div class="col-md-8 col-sm-8">
<select ng-model="CountryID" ng-options="I.CountryID as I.CountryName for I in CountyList" ng-change="GetStates()">
<option value="">Country</option>
</select>
</div>
</div>
</div>
angular code
function Getcountrys(){
var ddd = Mysercive.BindCntryList();
ddd.then(function (d) {
$scope.CountyList = d.data;
})
}
Where are u calling your Getcountrys() function?
Try call it when page will load via
<div ng-init="Getcountrys();">
at your template, or any other way.
Understand?
Related
I am pretty new in angular.
I'm working on an internal tool where I can get the user details like location, work profile and mobile number etc.
So i have a form with location, work profile dropdowns and mobile number input field. Here for the above fields im already getting data from database through ajax get request. If i want to change data like mobileNumber, how can i do that and how to save that to database which should override the before mobile number. thanks in advance.
here is my html code:
<form name="userForm">
<div class="page-heading fs-xs-1-5">
Update Profile
</div>
<div class= "second-row">
<div class="row">
<div class="col-lg-4">
<label for="Location"> Location</label>
<select class="form-control" placeholder="location" ng-model="user.location" required>
<option value="">Select Location</option>
<option>Hyderabad</option>
<option>Ahmadabad</option>
<option>New Jersey</option>
<option>California</option>
<option>Jaipur</option>
</select>
</div>
<div class="col-lg-4">
<label for="WorkProfile"> Work Profile</label>
<select class="form-control" placeholder="workprofile" ng-model="user.workProfile" required>
<option value="">Select Profile</option>
<option>UI Developer</option>
<option>Tester</option>
</select>
</div>
<div class="col-lg-4">
<label for="ContactNumber"> Contact Number</label>
<input class="form-width contact-height" type="text" ng-model="user.mobileNumber" maxlength="20" required></input>
</div>
</div>
</div>
<div class="third-row">
<div class="row">
<div class="col-lg-4">
<label for="SkillSet"> Skill Set</label>
<textarea id="SkillSet" class="form-width" placeholder="Enter Your skill set here..." row="4" col="100" ng-model="user.skillset" maxlength="250" required></textarea>
</div>
</div>
</div>
<button class="btn btn-primary setng-btn" type="submit" ng-click="addnewdata">Save</button>
</form>
js:`
(function () {
angular
.module('app.login')
.factory('userprofileService', userprofileService);
userprofileService.$inject = ['config', '$http'];
function userprofileService (config, $http) {
var userprofileService = this;
userprofileService.getUserDetails = function(){
return $http({
method: 'GET',
url: config.apiURL+'/v2/user',
headers: { 'Content-Type': 'application/json' }
}).then(function(response){
return response.data;
});
}
`
That will be too much to make clear.
for short, you need REST service as backend to call to save data.
AngularJS project is only front-end, you need backend ( to develop with Nodejs, JSP or asp.net/C# ) to serve this purpose.
Hi I have done this to add dynamic form field
<div ng-repeat="wspVdcMuniTbl in wspVdcMuniTbls">
<div class="col-sm-5">
<label>VDC/Municipalities</label>
<select
ng-model="wspVdcMuniTbl.tbl_vdc_municipality_id[$index]"
options="municipalities"
ng-options="municipality.id as municipality.name for municipality in municipalities">
</select>
</div>
<div class="col-sm-5">
<label>Wards</label>
<input type="text"
ng-model="wspVdcMuniTbl.wards[$index]"
id="Location">
</div>
<div class="col-sm-2">
<label> </label>
<button ng-hide="$first" ng-click="removeServiceArea($index)">-</button>
</div>
</div>
<div class="col-sm-2">
<button ng-click="addServiceArea()">+</button>
and my js part is
$scope.wspVdcMuniTbls = [{}];
$scope.addServiceArea = function(){
$scope.wspVdcMuniTbls.push({});
}
$scope.removeServiceArea = function(index){
$scope.wspVdcMuniTbls.splice(index,1);
}
here adding dynamic form field is working fine but after submit console.log($scope.wspVdcMuniTbl) is undefined what will be the problem please help
I am helping a friend build his app in AngularJS and we're using Parse.com as the backend. I've wired in part of the app to pull from Parse using REST so we can display their Brokers on the 'Find a Broker' page. It works very well but when ordering the dropdown list to display in alphabetical order, the items are display with each letter in an array format. Its hard to truly explain, but I'm including a screenshot and a link. Here's the link http://mci.parseapp.com/#/findbroker and here's the screenshot:
Some seriously strange behavior. When I pulled the broker list from a JSON file it displayed correctly, but from Parse, this is what it is doing.
Here's my code:
My Controller (function only):
.controller('BrokerCtrl',['$scope','Broker',function($scope,Broker) {
Broker.getAll().success(function(data){
$scope.items=data.results;
$scope.searchFeature = $scope.items[1].MarketArea;
});
}]);
I have a factory setup and named Broker with my Parse info. Just FYI
And here is my html:
<div class="row">
<div class="col-md-12">
<h1>Broker Directory</h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="orange">
<strong>Choose a Broker by State</strong>
<label>
<select ng-model="searchFeature">
<option ng-repeat="broker in items" ng-selected="broker.MarketArea == searchFeature" value="{{broker.MarketArea}}">{{broker.MarketArea | orderBy:'MarketArea'}}
</option>
</select>
</label>
</p>
</div>
<div class="col-md-6">
<p class="orange">
<strong>Name & Location of Broker</strong>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-img-page-2 broker"></div>
</div>
<div class="col-md-6">
<div ng-repeat="broker in items | filter:searchFeature" ng-hide="broker.BrokerNum =='000'">
<p>
<strong>Market Area:</strong> {{ broker.MarketArea }}<br/>
{{ broker.BrokerName }}<br/>
{{ broker.ContactName }}<br/>
Phone:
{{ broker.PhoneNum }}<br/>
Email:
{{ broker.EmailAddress }}<br/>
Web:
{{ broker.WebAddress }}
</p>
</div>
</div>
</div>
I'm still developing my Angular chops, so if anyone can help me figure this out, I would be very grateful. Thank you.
You need to put filter on ng-repeat, not when displayed, something like.
<option ng-repeat="broker in items | orderBy:'MarketArea'"
ng-selected="broker.MarketArea == searchFeature"
ng-value="broker.MarketArea">{{broker.MarketArea}} </select>
I have created one dropdown by using rest API in angular JS.
<div class="form-group">
<label for="address" class="col-lg-4 col-md-4 col-sm-4 control-label">Country</label>
<div class="col-lg-7 col-md-7 col-sm-7 col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
<select ng-model="selectCountry" class="selectpicker" ng-options="item.name for item in countryList">
<option value="">Select Country</option>
</select>
</div>
</div>
My controller
angular.module('myWebApp').controller('signInController',function ($scope){
alert("sign clicked" + $scope.selectCountry);
});
But my '$scope.selectCountry' is showing [object] [object]. Please help.
I can't see what your countryList array looks like but your ng-options most likely needs to be:
item.countryId as item.name for item in countryList
value / name / entry / array
So in your case, since you didn't specify the value, the value became the whole object.
https://docs.angularjs.org/api/ng/directive/select
I have written following code in .js file
var appMod = angular.module('appMod',[]);
appMod.controller('domainCtrl', function($scope) {
$scope.admins = [{"type":["Kerberos","Department","Office"],"office":["NA","Bangalore","NY","NJ"]}];
});
Now i want to select an option from a drop down of type and office.
I have written following code in .html
<label for="typeOfAccess" class="col-sm-2 control-label">Type of Access :</label>
<div class="col-sm-1">
<select name="typeOfAccess" data-ng-model="newDomain.typeOfAccess">
<option data-ng-repeat="typeOfAccess in admin.type" value="typeOfAccess">{{typeOfAccess}}</option>
</select>
</div>
Please suggest what to do.
That is not how you defined options for a select in angularjs.
Please check documentation angularjs docs
This is how it should look like:
<label for="typeOfAccess" class="col-sm-2 control-label">Type of Access :</label>
<div class="col-sm-1">
<select name="typeOfAccess"
data-ng-model="newDomain.typeOfAccess"
data-ng-options="typeOfAccess for typeOfAccess in admin.type">
</select>
</div>
Let me know if it works after making those changes.
Try to use ng-value to save selected option .
I had same problem here once: Display details of selected options in Angularjs
$scope.selection = {
typeOfAccess: null
};
<label for="typeOfAccess" class="col-sm-2 control-label">Type of Access :</label>
<div class="col-sm-1">
<select name="typeOfAccess" data-ng-model="newDomain.typeOfAccess">
<div data-ng-repeat="typeOfAccess in admin.type">
<label><option value="typeOfAccess" ng-value="typeOfAccess" ng-model="selection.typeOfAccess"> </label> </option>
</div>
</select>
</div>
Selected campaign: {{ selection.typeOfAccess }}