I am using AngularJS. I am trying to bind a dropdown with value shown from response. But I am not able to set the selected data. It always shows the default. Below is the index.cshtml:
<div class="col-sm-4">
<select name="CopyseasonTypeSelect" ng-model="CopyselectedSeasonType" ng-options="CopySeason.SeasonTypeName for CopySeason in seasons">
<option value="">-- Select the Season --</option>
</select>
</div>
In controller.js
testAPIService.getSeasonById(nId).success(function(response) {
$scope.seasonByIdReponse = response;
$scope.CopyselectedSeasonType = response.SeasonType; // I am getting "Summer"
$scope.init();
});
}
The dropdown has the values "-- Select the Season -- ", "Winter", "Summer", "Spring"
The object array is as below:
[object Object],[object Object],[object Object],[object Object]
[
0: {
[functions]: ,
$$hashKey: "object:78",
__proto__: { },
Id: 1,
ImageUrl: "testicon.png",
SeasonDetail: null,
SeasonTypeName: "Winter"
},
1: { },
2: { },
3: { },
length: 4
]
How to set the value in the dropdown from the service?
<select name="CopyseasonTypeSelect"
ng-model="CopyselectedSeasonType"
ng-options="i.SeasonTypeName as i.SeasonTypeName for i in seasons">
<option value="" style="display: none">-- Select the Season --</option>
</select>
Try this. Use track by in the ng-options to initialize it
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<select name="CopyseasonTypeSelect" ng-model="CopyselectedSeasonType" ng-options="CopySeason.SeasonTypeName for CopySeason in seasons track by CopySeason.Id">
<option value="">-- Select the Season --</option>
</select>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.seasons = [{
SeasonTypeName: "Winter",
Id: 0
},
{
SeasonTypeName: "Summer",
Id: 1
},
{
SeasonTypeName: "Spring",
Id: 2
}];
$scope.CopyselectedSeasonType = $scope.seasons[1];
});
</script>
</body>
</html>
Related
I have a list of names and activities displayed with ng-repeat which shows tabular data (shortened for brevity). The list box populates and I can show which SchoolDayID was previously stored and the value for this updates if you change the selection in the drop-down. When the form loads it does not select any value in the drop-down list. For the ng-select I have tried several variations, none of which worked. I am several days into this and have no idea what I am doing wrong or failing to understand. How do I get each drop down per row to select the correct item?
I have tried:
<select ng-model="selectedSchoolDayID" ng-init="selectedSchoolDayID = a.SchoolDayID" ng-options="x.ID as x.code for x in AMListData" >
</select>
and even:
<select class="form-group">
<option id="selectedSchoolDay" name="selectedSchoolDay" value="{{AMListData[0].ID}}" selected="{{AMListData[0].ID}} == {{a.SchoolDayID}}">{{AMListData[0].code}}</option>
<option id="selectedSchoolDay" name="selectedSchoolDay" value="{{AMListData[1].ID}}" selected="{{AMListData[1].ID}} == {{a.SchoolDayID}}">{{AMListData[1].code}}</option>
<option id="selectedSchoolDay" name="selectedSchoolDay" value="{{AMListData[2].ID}}" selected="{{AMListData[2].ID}} == {{a.SchoolDayID}}">{{AMListData[2].code}}</option>
</select>
Data for list box:
$scope.AMListData = participationSvc.amlist();
// from participationSvc:
'amlist': function listSelectionsController($scope) {
return [
{ ID: '0', code: 'PM Programming' },
{ ID: '1', code: 'AM Programming' },
{ ID: '2', code: 'Supplemental' }
];
},
HTML/AngularJS part:
<div ng-repeat="a in selectedAttendees | orderBy : a.LastName">
<!-- there could be many rows, once per name of person. each row should have a drop-down of its own -->
<div class="row">
<div>{{a.LastName}}</div>
...
<select class="col-md-5" id="SchoolDay" name="SchoolDay" ng-model="a.SchoolDayID">
<option data-ng-repeat="x in AMListData" name="SchoolDay" value={{x.ID}} ng-selected="{{(x.ID == selectedSchoolDay) ? true: false}}" >{{x.code}}</option>
</select>
<!-- Show me current selection and drop-down list data -->
<b> Selected ID: {{a.SchoolDayID}}</b>
<br />
<ul>
<li ng-repeat="x in AMListData">{{x.ID}} {{x.code}}</li>
</ul>
</div>
</div>
You can use default value in controller
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedSchoolDayID" ng-options="x.ID as x.code for x in AMListData" >
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.a={
//SchoolDayID:'2'
};
$scope.selectedSchoolDayID=$scope.a.SchoolDayID || '1';//'1' is Default Value
$scope.AMListData=[
{ ID: '0', code: 'PM Programming' },
{ ID: '1', code: 'AM Programming' },
{ ID: '2', code: 'Supplemental' }
];
});
</script>
</body>
</html>
I want to be able to select a person, and when selected, I see his values(name, tel, email, ..):
html :
<td class="leftAlign">
<span class="nullable">
<select ng-model="data.selectedPerson" ng-options="x.name for x in persons">
<option value="">-- Person --</option></select>
<br><br>
{{data.selectedPerson.name}}<br>
{{data.selectedPerson.Addrstr1}}<br>
{{data.selectedPerson.Tel}}<br>
{{data.selectedPerson.Mail}}<br>
<img data-ng-src="{{data.selectedPerson.img}}">
</span>
</td>
It works fine, I can see all the values of the person, and the img too. To reset everything in my html form I have a reset button, with the JS:
$scope.reset = function() {
$scope.data = {};
};
however, I can't erase the img.
in the JS, the persons values are in the array :
$scope.person = [
{name : "MrPerson1",
Addrstr1:"59 road",
Tel: "0234225163",
Email : "direction#gmail.com ",
img : "images/person1.PNG",
}];
Could you help me please?
Check this example, you are removing the data but not the ng-model of the <select>
var Controller = function() {
var vm = this
vm.persons = [{
name: "MrPerson1",
Addrstr1: "59 road",
Tel: "0234225163",
Email: "direction#gmail.com ",
img: "https://lh3.googleusercontent.com/-crlUFIoyB3k/UdzsGwV__AI/AAAAAAAAAXs/ErA8XESRgwk/5LsFP.gif",
}, {
name: "MrPerson2",
Addrstr1: "59 road",
Tel: "0234225163",
Email: "direction#gmail.com ",
img: "https://lh3.googleusercontent.com/-Ta_b7Z96-mE/Ud2hTqB-84I/AAAAAAAABEQ/BPY_MIbLitc/SausageDogAnimation.gif",
}, {
name: "MrPerson3",
Addrstr1: "59 road",
Tel: "0234225163",
Email: "direction#gmail.com ",
img: "https://www.gravatar.com/avatar/e27096ea0e246d04139047d40ff566d2?s=32&d=identicon&r=PG",
}];
vm.data = vm.persons
vm.reset = function() {
vm.data.selectedPerson = {}
};
};
angular
.module('app', [])
.controller('Controller', Controller);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Controller as vm">
<button ng-click="vm.reset()">Reset</button>
<select ng-model="vm.data.selectedPerson" ng-options="x.name for x in vm.data">
<option value="">-- Person --</option>
</select>
<br><br> {{vm.data.selectedPerson.name}}
<br> {{vm.data.selectedPerson.Addrstr1}}
<br> {{vm.data.selectedPerson.Tel}}
<br> {{vm.data.selectedPerson.Mail}}
<br>
<img ng-if="vm.data.selectedPerson.img" ng-src="{{vm.data.selectedPerson.img}}" />
</div>
Hi I am developing angularjs application. I tried many ways to set default value for dropdown in Angularjs but I am not able to set default value.
<select ng-change="getModel(b.ID)" ng-model="b.ID" id="brand" ng-options="b.MakeName for b in list">
<option value="1">-- Select a Make --</option>//Not working
</select>
<select ng-change="getStyle(a.ID)" ng-model="a.ID" ng-options="a.ModelName for a in Modellist" id="make" >
<option value="1">-- Select a Model --</option>
</select>//Not working
<select ng-change="getallDetails(c.ID)" id="type" ng-model="c.ID" ng-options="c.BodyStayleName for c in ModelStyle">
<option value="1">-- Select a Type --</option>
</select>//Not working
May I know am i missing here anything? Any help would be appreciated. Thank you.
Use ng-init or set the default value to the model variable inside the controller,
$scope.BrandId = "1";
DEMO
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.register = {};
$scope.BrandId = "1";
$scope.brands = [{
id: "1",
name: "TOYOTA"
}, {
id: "2",
name: "HONDA"
}, {
id: "3",
name: "MARUTI"
}, {
id: "4",
name: "BMW"
}];
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<div>
<select ng-init="BrandId=='1'" ng-model="BrandId" ng-options="brand.id as brand.name for brand in brands"></select>
</div>
</div>
</body>
</html>
I have this html markup:
<div ng-repeat="prop in props" style="margin-bottom: 10px;">
<label class="col-md-4 control-label">Property {{$index + 1}} ({{prop.AddressLine1}})</label><div class="col-md-8">
<select ng-model="prop.Grade" class="form-control" ng-options="opt.name for opt in propGradings track by opt.id"> <option ng-selected="{{option.id == prop.Grade}}" ng-repeat="option in propGradings" ng-value="{{option.id}}">{{option.name}}</option> </select>
</div>
</div>
This static array to fill in the dropdown:
$scope.propGradings = [{ name: "1", id: 1 }, { name: "2", id: 2 }, { name: "3", id: 3 }, { name: "4", id: 4 }];
I'm able to load the items in the dropdown, but I'm not able to preselect the correct value based on the prop.Grade value.
HTML Output:
Any idea what am I doing wrong?
When selecting options from a dropdown, type matters for binding purposes. When using ng-options, you can use as to bind something to the model as a non-string value. In your case, you may want to bind to the integer value of the id.
Syntax: select as label for value in array
> select: The value that gets bound to ng-model
> label: What value visibly shows up in the dropdown
> value: Current item in array
> array: Data source for generating the options
Example of binding to an integer value:
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.props = [{Grade: 1}];
$scope.propGradings = [{ name: "1", id: 1 }, { name: "2", id: 2 }, { name: "3", id: 3 }, { name: "4", id: 4 }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Binding with an integer value:
<div ng-repeat="prop in props" style="margin-bottom: 10px;">
<label class="col-md-4 control-label">Property {{$index + 1}} ({{prop.AddressLine1}})</label>
<div class="col-md-8">
<select ng-model="prop.Grade" class="form-control" ng-options="opt.id as opt.name for opt in propGradings">
<option ng-selected="{{option.id == prop.Grade}}" ng-repeat="option in propGradings" ng-value="{{option.id}}">{{option.name}}</option>
</select>
</div>
</div>
</div>
Example of binding to a string value:
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.props = [{Grade: "1"}];
$scope.propGradings = [{ name: "1", id: 1 }, { name: "2", id: 2 }, { name: "3", id: 3 }, { name: "4", id: 4 }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Binding with a string value:
<div ng-repeat="prop in props" style="margin-bottom: 10px;">
<label class="col-md-4 control-label">Property {{$index + 1}} ({{prop.AddressLine1}})</label>
<div class="col-md-8">
<select ng-model="prop.Grade" class="form-control" ng-options="opt.name as opt.name for opt in propGradings">
<option ng-selected="{{option.id == prop.Grade}}" ng-repeat="option in propGradings" ng-value="{{option.id}}">{{option.name}}</option>
</select>
</div>
</div>
</div>
Im trying to create a dependent drop-down list box using json.For example: if the car brand selected is "bmw" then the car model drop-down must display only "suv" from the list and other two options shouldn't be displayed.Likewise for "Mercedes" it should display only "suv" and "coupe" in the car model. And also please explain what is the use of json? also how it effect the code.
my.html
Car Brand:
<select name="carname" ng-model="userSelect" required>
<option value="">--Select--</option>
<span ng-show="valdate.carname.$error.required">Car name</span>
<option ng-repeat="ManufactureBrand in a" ng-bind="ManufactureBrand" >
{{ManufactureBrand}}
</option>
</select>
<br/>
<br/> Car Model:
<select name="carmodel" ng-model="selectCar" required>
<option value="">--Select--</option>
<span ng-show="valdate.carmodel.$error.required">Car name</span>
<option ng-repeat="CarName in b" ng-bind="CarName">
{{CarName}}
</option>
</select>
<br/>
<input type="submit" ng-click="checkselection()" ng-disabled="valdate.carname.$invalid && valdate.carmodel.$invalid">
script.js
app.factory('Brandtest', function () {
var brand = {};
brand.sample = ['Bmw', 'Mercedes', 'Honda'];
brand.car = ['Suv', 'Sedan', 'Cope'];
{
return brand;
}
});
app.controller('selectDropdown', ['$scope', 'Brandtest', function ($scope, Brandtest) {
$scope.a = Brandtest.sample;
$scope.b = Brandtest.car;
$scope.list=[];
$scope.carlist=[];
$scope.checkselection = function () {
if ($scope.userSelect != "" && $scope.userSelect != undefined &&
$scope.selectCar != "" && $scope.selectCar != undefined )
{
$scope.list.push($scope.userSelect);
$scope.carlist.push($scope.selectCar);
}
Thanks in advance.
Here is the working plunkr
You have to modified you code as below
your factory should be like this
app.factory('Brandtest', function () {
var brand = {};
brand.sample =[
{
"id": 0,
"carName": "BMW"
},
{
"id": 1,
"carName": "Mercedes"
},
{
"id": 2,
"carName": "Honda"
}
];
brand.car =[
{
"id": 0,
"carType": "Suv",
"parentId": 0
},
{
"id": 1,
"carType": "Sedan",
"parentId": 1
},
{
"id": 2,
"carType": "Cope",
"parentId": 2
}
];
{
return brand;
}
});
In your HTML modify the code like below
<body ng-controller="selectDropdown">
Car Brand:
<select name="carname" ng-model="userSelect" ng-options="p.carName for p in a" required>
<option value="">--Select--</option>
<span ng-show="valdate.carname.$error.required">Car name</span>
</select>
<br/>
<br/> Car Model:
<select name="carmodel" ng-model="selectCar" ng-options="c.carType for c in b | filter:{parentId: userSelect.id}" required>
<option value="">--Select--</option>
<span ng-show="valdate.carmodel.$error.required">Car name</span>
</select>
<br/>
<input type="submit" ng-click="checkselection()" ng-disabled="valdate.carname.$invalid && valdate.carmodel.$invalid">
<table>
<tr>
<th>Car Name</th>
<th>Car Model</th></tr>
<tr ng-repeat="carz in list track by $index">
<td>{{carz.carName}}</td>
<td>{{carlist[$index].carType}}</td>
</tr>
</table>
</body>
You have to maintain some co-relation between the 2 dropdowns. Better would be to have a single json object and use ng-options for populating the second dropdown based on value selected in first dropdown. Run the demo program below and you will get the point.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Select a car:</h1>
<select ng-model="x" ng-options="x for (x, y) in cars"></select>
<h1 ng-if="x">Category: </h1>
<select ng-if="x" ng-model="y" ng-options="y for y in x"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
"car01" : ["Ford", "BMW", "NISSAN"],
"car02" : ["Fiat", "Infinity"],
"car03" : ["Volvo", "Toyota"]
}
});
</script>
</body>
</html>