<input type="text" ng-model= "name" title="{{name}}">//this title shows name what ng-model contains
In the same way...
<select title ="{{item.actionId}}" ng-model="item.actionId">
<option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option>
</select>
actionList:-
$scope.actionList = [{
"ACTION_ID": 39,
"URL": "/abc"
}, {
"ACTION_ID": 59,
"URL": "/xyz"
}];
Here item is the parent list. I am getting title as it's id as the value is id.
Here I want to get the corresponding url. How can I get the url.
The JSON data and the code looks fine, Check the demo below if you have missed anything.
DEMO
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
$scope.actionList = [{
"ACTION_ID": 39,
"URL": "/abc"
}, {
"ACTION_ID": 59,
"URL": "/xyz"
}];
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
<div class="form-group">
<select title ="{{item.actionId}}" ng-model="item.actionId">
<option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option>
</select>
</div>
</div>
</body>
</html>
You can use ng-options along with ng-change to capture the ids and show url on title
var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
$scope.actionList = [{
"ACTION_ID": 39,
"URL": "/abc"
}, {
"ACTION_ID": 59,
"URL": "/xyz"
}];
$scope.getValues=function(){
debugger
$scope.selectedID=$scope.item.ACTION_ID;
$scope.selectedURL=$scope.item.URL;
console.log("selectedId:" + $scope.selectedID );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div ng-app="app" ng-controller="Ctrl">
<div class="form-group">
<select ng-model="item" ng-change="getValues()" ng-options="action as action.URL for action in actionList" title="{{selectedURL}}">
</select>
</div>
</div>
</body>
</html>
You can simply do like below code:
<select ng-model="item" ng-options="action as action.URL for action in
actionList" title="{{item.URL}}">
You should use ng-option instead of ng-repeat. always use track by clause to set value in option list when creating from object
<!DOCTYPE html>
<html>
<body>
<select ng-model="item" ng-options="action as action.URL for action in actionList track by action.URL" >
<option value="">Volvo</option>
</select>
</body>
</html>
Related
This is my custom json data
{0: {'Married Status': {'M', '', 'S'}}, 1: {'COMNCTN_IND': {'', 'OFC', 'RES', 'PGR'}}}
I have tried this,
Code:
<select ng-model="ddldates" ng-options="number.dates for number in dates">
</select>
</div>
</body>
<script>
angular.module("myApp", [])
.controller('myController', function ($scope, $filter) {
$scope.dates=[{0: {'Married Status': {'M', '', 'S'}}, 1: {'COMNCTN_IND': {'', 'OFC', 'RES', 'PGR'}}}];
});
</script>
How to add drop down? Please help.
I want to what should I write in ng option for my data
<!DOCTYPE html>
<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="ddldates">
<option ng-repeat="item in dates.married_status">{{item.status}}</option>
</select>
<select ng-model="ddldates2">
<option ng-repeat="item in dates.COMNCTN_IND">{{item.comm_ind}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dates={};
$scope.dates.married_status =[{status:"M"}, {status:""}, {status:"S"}];
$scope.dates.COMNCTN_IND =[{comm_ind:""}, {comm_ind:"OFC"}, {comm_ind:"RES"}, {comm_ind:"PGR"}];
console.log($scope.dates);
});
</script>
</body>
</html>
not sure what you are trying to do.
try this.
TLDR:
$scope.dates={};
$scope.dates.married_status=[{status:"M"}, {status:""}, {status:"S"}];
$scope.dates.COMNCTN_IND=[{comm_ind:""}, {comm_ind:"OFC"}, {comm_ind:"RES"}, {comm_ind:"PGR"}];
<select ng-model="ddldates">
<option ng-repeat="item in dates.married_status">{{item.status}}</option>
</select>
<select ng-model="ddldates2">
<option ng-repeat="item in dates.COMNCTN_IND">{{item.comm_ind}}</option>
</select>
Full code.
<!DOCTYPE html>
<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="ddldates">
<option ng-repeat="item in dates.married_status">{{item.status}}</option>
</select>
<select ng-model="ddldates2">
<option ng-repeat="item in dates.COMNCTN_IND">{{item.comm_ind}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dates={};
$scope.dates.married_status =[{status:"M"}, {status:""}, {status:"S"}];
$scope.dates.COMNCTN_IND =[{comm_ind:""}, {comm_ind:"OFC"}, {comm_ind:"RES"}, {comm_ind:"PGR"}];
console.log($scope.dates);
});
</script>
</body>
</html>
So I have angular code like this
<select class="form-control" ng-model="ctrl.selectedProvider">
<option value="">Please select a provider</option>
<option ng-repeat="provider in ctrl.providers" ng-value={{provider.id}}>
{{provider.description}}
</option>
</select>
The data is like this
providers = [{
id: 1,
description: provider1
},{
id: 2,
description: provider2
}]
If there's only have one element in ctrl.providers, I want to set the default value of the select tag to this provider. Otherwise, I want to keep it to "Please select a provider" and let the user select the provider he wants. I have googled that and found ng-init, but I think it's not useful for my case. Any ideas? Thanks
I think what you have will work, just need to adjust your code a little: (Example below)
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var ctrl = this;
// Uncomment to see result
//ctrl.selectedProvider = null;
//ctrl.selectedProvider = "";
ctrl.selectedProvider = 1;
//ctrl.selectedProvider = 2;
ctrl.providers = [{
id: 1,
description: "provider1"
},{
id: 2,
description: "provider2"
}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<select class="form-control" ng-model="ctrl.selectedProvider">
<option value="">Please select a provider</option>
<option ng-repeat="provider in ctrl.providers" ng-value={{provider.id}}>
{{provider.description}}
</option>
</select>
</body>
</html>
Use ng-options to create the <option> tags and check data length to assign model if applicable
angular.module('app', [])
.controller('MainCtrl', function() {
this.providers = [{
id: 2,
description: 'provider2'
}];
if (this.providers.length === 1) {
this.selectedProvider = this.providers[0]
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<div ng-app="app" ng-controller="MainCtrl as ctrl">
<select class="form-control"
ng-model="ctrl.selectedProvider"
ng-options="o.id as o.description for o in ctrl.providers track by o.id">
<option value="">Please select a provider</option>
</select>
</div>
I am using ng-options for my select tag to have choices for the users. Everything works perfectly but after selecting an option for the first time the default blank value is gone. What if I want to revert back to the defaul blank value again? How can that be done? How can I retain that blank value?
Here is an example of my code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
<h1>Hello World!</h1>
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
</select>
</body>
</html>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.myOptions = [{
"value": null,
"label": null,
},{
"value": "First",
"label": "First",
},{
"value": "Second",
"label": "Second",
},{
"value": "Third",
"label": "Third",
}]
});
</script>
Here is the plunker: http://plnkr.co/edit/5f17YxRfWFI4g40t3NEf?p=preview
use
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
<option value=""></option>
</select>
Don't pollute your 'myOptions' with dummy null object, as APIs will not return you the same. you need to handle it on presentation layer, as shown above. while saving, if use selects empty, it will be saved as null (if handled properly)
also you can have something like this
<option value="">---select---</option>
Just add blank option to your options and select the blank by default like:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
<h1>Hello World!</h1>
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
</select>
</body>
</html>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.mySelection = '';
$scope.myOptions = [{
"value": "",
"label": "",
},{
"value": "First",
"label": "First",
},{
"value": "Second",
"label": "Second",
},{
"value": "Third",
"label": "Third",
}]
});
</script>
here we add the blank option
{
"value": "",
"label": "",
}
and select that empty option $scope.mySelection = '';
I have the following select:
<select class="form-control"
onchange="User_Changed_Language()"
id="HeaderLanguageSelection"
style="cursor:pointer;width:100%;height:30px;margin:0;padding:0"
title="{{Labels.Change_Language_Tooltip}}">
<option ng-repeat="One_Language in Languages_List"
value="{{One_Language.Code}}"
ng-selected="One_Language.Code == current_Language">
{{One_Language.Name}}
</option>
</select>
Now, current_Language is a $rootScope variable with a value (e.g. "EN"). I want the select element to display the selected value instead of the very first. What am I doing wrong?
One more note: I know that I could use ng-click, but I don't think this is the source of the issue.
Thanks.
Check this snippet:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $rootScope) {
$scope.Labels = {Change_Language_Tooltip: "change lang"};
$scope.Languages_List = [
{ name: 'English', Code: 'en' },
{ name: 'Espanol', Code: 'es' },
{ name: 'Italian', Code: 'it' }];
$rootScope.current_Language = $scope.Languages_List[1];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>selected item is : {{current_Language}}</p>
<select class="form-control"
onchange="User_Changed_Language()"
id="HeaderLanguageSelection"
style="cursor:pointer;width:100%;height:30px;margin:0;padding:0"
title="{{Labels.Change_Language_Tooltip}}"
ng-options="item.name for item in Languages_List track by item.Code"
ng-model="current_Language">
</select>
</body>
</html>
PS: the selected item (default or initial) must be one element of the items used in the ngOptions list
I am using ng-repeat to simple put down options from an array. Though, I hope I am doing it alright I am not able to see any options in the dropdown of select options. Can someone help me find the error?
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function($scope) {
$scope.Country = [
"India","Pakistan","Germany"
];
});
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in Country"></option>
</select>
</body>
</html>
Try this:::
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-model ="selectedCountry">
<option ng-repeat="x in Country" value = "{{x}}"> {{x}} </option>
</select>
<script>
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function($scope) {
$scope.Country = [
"India","Pakistan","Germany"
];
});
</script>
</body>
</html>
You are actually not printing any value into option element, you should try like below.
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in Country" value="{{x.id}}">{{x.name}}</option>
</select>
<script>
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function($scope) {
$scope.Country = [
{"id":"1","name":"India"},
{"id":"2","name":"Pakistan"},
{"id":"3","name":"Germany"}
];
});
</script>
</body>
</html>
Use ng-options instead of using ng-repeat with select tag:
<select ng-options="x for x in country" ng-model="selectedCountry"> </select>
yes you didn't use {{x}} this value that is the reason it's not working for you , it may be ng-options or option anything any thing you can use ...
Use ng-options instead of using ng-repeat with select tag:
My solution is tested and valided:
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-options="option.name for option in Country track by option.id" ng-model="selectedCountry">
<option value="">All</option>
</select>
ID: {{selectedCountry.id}} and NAME: {{selectedCountry.name}}
<script>
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function($scope) {
$scope.selectedCountry="";
$scope.Country = [
{"id":"1","name":"India"},
{"id":"2","name":"Pakistan"},
{"id":"3","name":"Germany"}
];
});
</script>
</body>
</html>
DEMO in Plunker