country names displaying using select box, select option coming from external json file. Based on selected country i am loading state json file into another select box,till every thing is ok, Now I need set Default selected country as INDIA, I tried bellow code.
html
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<select id="country" ng-init="state1 = options['IN']" style="width:250px;" class="" name="selectFranchise" ng-model="state1" ng-change="displayState(state1)">
<option ng-repeat="(key,country) in countries" value="{{key}}">{{country[0]}}</option>
</select>
</div>{{countries}}{{state1}}
<div>
<select id="state" ng-model="cities">
<option ng-repeat="(state,city) in states[state1]" value="{{city}}">{{city}}</option>
</select>
</div>
</div>
script
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.states = {
"IN":[
"Delhi",
"Goa",
"Gujarat",
"Himachal Pradesh",
]
};
$scope.countries = {
IN: ["India"],
ZA: ["South Africa"],
AT: ["Austria"]
}
$scope.lastName = "Doe";
});
jsfiddle
Add this in the controller after defining your $scope.countries
$scope.state1 = Object.keys($scope.countries)[0];
Remove ng-init from Html page.
Related
there is a dropdown of country and state when I select country of name I have to pass id of country but after click event it should pass id but display as name how can I make it please guide
<md-select name="state" id="state" placeholder="Select a state" md-no-asterisk="true"
ng-change="getCounties(state)" ng-model="state">
<md-option ng-repeat="item in state track by id"
value="{{item.id}}">
{{item.name}}
</md-option>
</md-select>
{{AddressState}} /* This should be name instead of value how can i display this ? */
<div class="clearfix" ng-click="edit()">
Edit</a></div>
controller.ts :
$scope.AddressState = state;
Don't use state as your ng-model since state is already your data source. Consider instead using an object to capture all user input, with state as a property. Your ng-model will capture the ID on user selection, which is what you want, and you can use that to get the state name.
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.userInput = {
state: {}
};
$scope.state = [{
"name": "Califoria",
"id": 1
}, {
"name": "Texas",
"id": 2
}]
$scope.getCounties = function() {
// $scope.userInput.state is updated autmatically with the ID
console.log($scope.userInput)
// the associated data can be found using
let state = $scope.state.find(s => s.id == $scope.userInput.state)
$scope.selectedState = state.name; // for display
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="userInput.state" ng-change="getCounties()">
<option ng-repeat="item in state" value="{{item.id}}">
{{item.name}}
</option>
</select>
<p> {{selectedState}} </p>
</div>
I am trying to get the user selected value from select list using ng-change, but i can't seem to find what went wrong:
Everytime i select any other option i get "Sam" , my question is how can i get the userselected value instead of the default one "Sam"
Here is the html:
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<p> Employee Name/Employee ID:
<select ng-model="pickEmp" ng-change="setEmployee(pickEmp)">
<option ng-value="James">James</option>
<option ng-value="Sam">Sam</option>
<option ng-value="Patrick">Patrick</option>
</select>
</p>
</div>
</body>
and here is the JS
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.formObject = {
empId:'Sam',
que1:{
status:'YES',
payBand:0-11
}
$scope.setEmployee = function(){
$scope.pickEmp = $scope.formObject.empId;
}
Inside the setEmployee function, you are setting the ng-model as value sam. remove that line.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.formObject = {
empId:'Sam',
que1:{
status:'YES',
payBand:0-11
}}
$scope.setEmployee = function(){
console.log($scope.pickEmp)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<p> Employee Name/Employee ID:
<select ng-model="pickEmp" ng-change="setEmployee(pickEmp)">
<option ng-value="James">James</option>
<option ng-value="Sam">Sam</option>
<option ng-value="Patrick">Patrick</option>
</select>
</p>
</div>
</body>
HTML script
<div>
<select ng-model="selectView">
<option value="empTable.html">Table View</option>
<option value="empList.html">List View</option>
</select>
<div ng-include="selectView"></div>
</div>
Angular script
var angScript = angular.module("multiselectapp",[]). controller ("multicontroller", function ($scope){
var empList = [
{ name:"sue", gender:"female" },
{ name:"Joe", gender:"male" }
];
$scope.employees =empList;
$scope. selectView ="empTable.html";
});
The empTable.html and empList.html has basic HTML script using ng-repeat to display the table and list view.
The angular script file is loaded and all paths are good to go having cross verified them with a $scope.message="file detected in html“ message which is displayed on HTML page.
But the table and list is not displayed at all.
Suggestions please!
Ng-include=" '{{selectedView}}' "
if its not gonna work try removing {{}}
Try out
<div ng-include src="selectView"></div>
It seems it works for me:
https://embed.plnkr.co/wFaG4m?p=preview
<body ng-controller="MainCtrl">
<p>selected item is : {{selectedItem}}</p>
<p> name of selected item is : {{selectedItem.name}} </p>
<select ng-model="selectedItem" ng-options="item.name for item in items"></select>
<div ng-include="selectedItem.name"></div>
</body>
var app = angular.module('plunker', []);
Js:
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.selectedItem = { name: 'a.html'};
$scope.items = [{name: 'c.html'},{ name: 'a.html'}];
});
$scope. selectView ="empTable.html";
Here unnecessary space is there between $scope and the variable name. Try removing space as below $scope.selectView ="empTable.html";
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myctrl', function($scope) {
$scope.state = [{name:'TamilNadu', code:1}, {name:'Kerala', code:2}, {name:'Karnataka', code:3}];
$scope.onChange = function() {
var a = this.drop.state; }
});
</script>
<body>
<div ng-app="myApp" ng-controller="myctrl">
State :
<select id="stat" ng-model="drop.state" ng-change="onChange()">
<option ng-repeat = "x in state"> {{x.name}} </option>
<select>
</div>
</body>
In this code, I can be able to get the selected value from the textbox in the variable a. Now, I need to get the code value of the name selected. Is it possible using indexof(). And I need it in dynamic ie., when the 'state' is selected I need that corresponding 'code' from the array set.
<option value="{{x}}" ng-repeat = "x in state"> {{x.name}} </option>
If you add the value on your Option, you may get the complete object, and accessing the code and the Value
you can assign code as value to option
<option ng-repeat = "x in state" ng-value="x.code"> {{x.name}}
Demo
var app = angular.module('myApp', []);
app.controller('myctrl', function($scope) {
$scope.drop = {}
$scope.state = [{name:'TamilNadu', code:1}, {name:'Kerala', code:2}, {name:'Karnataka', code:3}];
$scope.onChange = function() {
var a = $scope.drop.state
console.log(a)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myctrl">
State :
<select id="stat" ng-model="drop.state" ng-change="onChange()">
<option ng-repeat = "x in state" ng-value="x.code"> {{x.name}} </option>
</select>
</div>
Even though the other answer is valid, this is the right way to go about it:
<select id="stat" ng-model="drop.state" ng-options="x.code as x.name for x in state" ng-change="onChange()">
<option value="">Select a value</option>
</select>
If the purpose of the ng-change was to get the state code, this way it's not needed. Your ng-model will be equal to the selected state code.
You can bind data to a single property., and can access both. with preferred ng-options .
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myctrl', function($scope) {
$scope.state = [{
name: 'TamilNadu',
code: 1
}, {
name: 'Kerala',
code: 2
}, {
name: 'Karnataka',
code: 3
}];
$scope.onChange = function() {
alert(this.drop.state.name);
alert(this.drop.state.code);
}
});
</script>
<body>
<div ng-app="myApp" ng-controller="myctrl">
State :
<select id="stat" ng-model="drop.state" ng-options= "x as x.name for x in state" ng-change="onChange()"> </select>
</div>
</body>
I was trying simple select drop down in my app. Where I have set a default value in ng-model. But on load the drop down does not select the ng-model value.
Below are my codes:
HTML:
View <select ng-model="viewby" ng-change="setItemsPerPage(viewby)"><option>3</option><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option></select> records at a time.
Js:
$scope.viewby=3
$scope.setItemsPerPage = function(num) {
console.log( num);
}
Here ng-change is working perfectly.
Here '3' should be selected on load. I tried ng-init and selected='selected' also and both are not working. Any suggestion will help.--thanks
Try like below snippet. Here default selected option was 20, you can change it to your need.
var app = angular.module('app', []);
app.controller("ctrl", function($scope) {
$scope.selectedOption = 20;
$scope.setItemsPerPage = function(num) {
console.log(num);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
View
<select ng-model="selectedOption" ng-change="setItemsPerPage(selectedOption)">
<option>3</option>
<option>5</option>
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
</select>
records at a time.
</div>
</div>
In angular, Better way is to define the options as array and bind them, so that ng-model will get updated.
JS:
$scope.model = 30;
$scope.options = [10, 20, 30,40,50];
HTML
<select ng-change="setItemsPerPage(model)" ng-model="model" ng-options="value for value in options"></select>
DEMO