I am getting the response as below and I would like to adjust those in select option tag. How can I set those please suggest the same
[null,"a","b","c ","d"]
My code is like
$http.get('v1/sport').success(function(data) {
$scope.sports = [];
//$scope.sports = data.data;
angular.forEach(data.data, function(value, key) {
$scope.sports[value.sport_id] = value.name;
});
});
In view
<select name="teamSport"
ng-model="player.sport_id"
ng-options="sport[player.sport_id] as sport[player.name] for sport in sports"
ng-change="changedSport()"
required>
<option value="" selected="selected">-- Select --</option>
</select>
Using ng-repeat and ng-model like this
<select ng-model='value'>
<option ng-repeat='option in options'>
{{option}}
</option>
</select>
$http.get('v1/sport') .success(function (data) { $scope.sports = []; angular.forEach(data.data, function(value, key){ $scope.sports[value.sport_id] = value.name; }); });
$http.get('v1/selectedSport') .success(function (data) { $scope.selectedSport = data; });
And the view
<select
ng-model="selectedSport"
ng-options="sport[player.sport_id] as sport[player.name] for sport in sports">
</select>
You can directly use the data without converting it using forEach.
Here is the script which will render the dropdown using the data you gave in the comment [{"sport_id":"1","name":"a"},{"sport_id":"2","name":"b"},{"sport_id":"3","name":"c"},{"sport_id":"4","name":"d"}]
You can set the selected in the $scope.selected variable.
var myApp = angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
$scope.sports = [{"sport_id":"1","name":"a"},{"sport_id":"2","name":"b"},{"sport_id":"3","name":"c"},{"sport_id":"4","name":"d"}];
$scope.selected = $scope.sports[2];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyController">
{{selected}}
<select name="teamSport"
ng-model="selected"
ng-options="sport as sport.name for sport in sports"
ng-change="changedSport()"
required>
<option value="" selected="selected">-- Select --</option>
</select>
</div>
</div>
Related
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>
I have a select tag which i have loaded the data through angular ng-repeat.
<select ng-model="user.accessRole">
<option ng-selected="{{item.name == user.accessRole.name}}"
ng-repeat="item in accessRoles" value="{{item}}">
{{item.name}}
</option>
</select>
Once I submit this the value I got for accessRole model is as below.
accessRole:"{"id":1,"name":"admin","accessRights":"administrative access"}"
I want this value to be passed without double quotes. That means,
accessRole:{"id":1,"name":"admin","accessRights":"administrative access"}
I tried out this by removing double quotes in value property.(value={{item}})
But it didn't give me the solution.
How can i do this?
It should be like to this.
var app = angular.module('anApp', []);
app.controller('ctrl', function($scope) {
$scope.user = {};
$scope.accessRoles= [{"id":1,"name":"admin","accessRights":"administrative access"}];
$scope.display = function(){
console.log($scope.user);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="anApp" ng-controller="ctrl">
<div class="form-group">
<select ng-options="role as role.name for role in accessRoles" ng-model="user.accessRole" ng-change="display()">
</select>
</div>
</div>
use JSON.parse() to convert string to json object
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.user = {};
$scope.accessRoles= [{"id":1,"name":"admin","accessRights":"administrative access"}]
$scope.submit = function(){
console.log($scope.user)
$scope.user.accessRole = JSON.parse( $scope.user.accessRole)
console.log($scope.user)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="user.accessRole">
<option ng-repeat="item in accessRoles" value="{{item}}">
{{item.name}}
</option>
</select>
<button ng-click="submit()">click</button>
</div>
This is json like this -[{"1":"B"},{"2":"A"},{"100":"E"},{"104":"P"},{"105":"A"},{"1551":"D"}]
and want it to create an select tag which should be look like this
<select name="">
<option value="1">B</option>
<option value="2">A</option>
<option value="100">E</option>
...
</select>
Try like this.
var app = angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
$scope.data = [{"1":"B"},{"5":"A"}];
$scope.getData = function(){
var d = {};
angular.forEach($scope.data,function(value,key){
for(var v in value){
d[v] = value[v];
}
});
return d;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
<select ng-model="sel" ng-options="key as value for (key , value) in getData()"></select>
</div>
One of the ng-models gives null value. When I click the button with the function setNewRecord the parameter selectedDocument is null. The first two parameters are correct. The javascript code is added as well.
<form name="myForm" >
<div>
<select ng-model="selectedCompany">
<option value="">-- Select Company --</option>
<option data-ng-repeat="currentSetting in currentSettings" value={{currentSetting.SCACCode}}>{{currentSetting.SCACCode}}</option>
</select>
</div>
<div><input id="Text1" type="text" ng-model="enteredCustomer"/></div>
<div>
<select ng-model="selectedDocument" ng-click="getTypes(selectedCompany, enteredCustomer)">
<option value="">-- Select Doc type --</option>
<option data-ng-repeat="docSetting in docSettings" value="{{docSetting.Doc_Type}}">{{docSetting.Doc_Type}}</option>
</select>
</div>
<input id ="btnAdd" type="button" value="Add new record" ng-click="setNewRecord(selectedCompany, enteredCustomer,selectedDocument)"/>
Java Script
myApp.service('getDocTypesService', ['$http', '$q', function($http, $q) {
var allSettings = null;
this.getDocTypes = function(compName, custName) {
var def = $q.defer()
if (allSettings) {
def.resolve(allSettings);
} else {
$http.post('GetDocTypes', {
companyName: compName,
customerName: custName
})
.then(function(response) {
var response = $.parseJSON(response.data)
allSettings = response;
def.resolve(allSettings);
});
}
return def.promise;
}
}]);
myApp.controller('myController', ['$scope', 'getDocTypesService',
function($scope, getDocTypesService) {
$scope.getTypes = function(comp, cust) {
getDocTypesService.getDocTypes(comp, cust).then(function(value) {
$scope.docSettings = value
});
};
}
]);
Try replacing the select for selectedDocument with this:
<select ng-model="selectedDocument"
ng-click="getTypes(selectedCompany, enteredCustomer)"
ng-options="docSetting.Doc_Type for docSetting in docSettings track by docSetting.Doc_Type">
</select>
Beginner in AngularJS. I have a JSON string that has only dates which needs to be populated in html select. Below is what I tried.
JSON string would look like
[{"Dates":"04/10/2015"},{"Dates":"04/03/2015"},{"Dates":"02/20/2015"},{"Dates":"02/13/2015"},]
My JS would look like
<script>
var app = angular.module('myApp', []);
app.controller('dvDates', function ($scope, $http) {
$scope.Dates = [];
$http.post("Basics1.aspx/GetDates", { data: {} })
.success(function (data, status, headers, config) {
var results = JSON.parse(data.d);
$scope.Dates = results;
})
.error(function (data,status,headers,config) { });
});
</script>
HTML Code:
<div ng-app="myApp" ng-controller="dvDates">
<select ng-model="Dates" ng-options="item.Dates as item.Dates for item in Dates">
<option value=""> Select From Date</option>
</select>
</div>
The result is as below. Dropdownlist is shown properly.
<select class="ng-pristine ng-valid ng-touched" ng-options="item.Dates as item.Dates for item in Dates" ng-model="Dates">
<option value=""> Select From Date</option>
<option value="0" label="04/10/2015">04/10/2015</option>
<option value="1" label="04/03/2015">04/03/2015</option>
<option value="2" label="02/20/2015">02/20/2015</option>
<option value="3" label="02/13/2015">02/13/2015</option>
<option value="4" label="02/06/2015">02/06/2015</option>
<option value="5" label="01/30/2015">01/30/2015</option>
</select>
But when I select any value for this, the HTML changes as below and all the values wipes out.
<select class="ng-valid ng-dirty ng-touched" ng-options="item.Dates as item.Dates for item in AsOf" ng-model="Dates">
<option value="? string:01/30/2015 ?"></option>
<option value=""> Select From Date</option>
</select>
Please let me know what I'm doing wrong. The issue happens only with Dates. When I try with normal string to populate in Select, everything works as expected.
You need to change your model in select from
ng-model="Dates"
for somthign different ie
ng-model="selected.Date"
otherwise every time when you choose something from your select box, you overwrite your $scope.Dates model
angular.module("app", [])
.controller('homeCtrl', function($scope) {
$scope.Dates = [{
"Dates": "04/10/2015"
}, {
"Dates": "04/03/2015"
}, {
"Dates": "02/20/2015"
}, {
"Dates": "02/13/2015"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="homeCtrl">
<select ng-model="selected.Date" ng-options="item.Dates as item.Dates for item in Dates">
<option value="">Select From Date</option>
</select>
Selected : {{selected.Date}}
</div>
</body>
the select tab not get your data because you have been post method to get dates,Change it to get method and it will list all your dates in Json