Can we display alias name in the select options of dropdown using Angular JS
Issue :
Trying change Boolean value true to Ascending and false to Descending in the display of dropdown options and also trying to retain boolean value on selection of alias name - Ascending or Descending
HTML:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Trying to show dropdown options Ascending or Descending instead of true or false<br><br>
<select ng-model="selectedName" ng-options="x.ascending for x in names">
</select><br><br>
{{selectedName}}
</div>
</body>
</html>
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [{"name":"xxxx","ascending":true},{"name":"yyyy","ascending":false}];
});
http://codepen.io/nagasai/pen/ZBMLep
If you wish to show Ascending/Descending instead of true/false then you can just add one ternary condition like below.
<select ng-model="selectedName" ng-options="(x.ascending ? 'Ascending' : 'Descending') for x in names track by x.ascending"></select>
Related
I have a select box which I am using with an angular object as the value i.e.
{identityName:'Passport',identityId:1}
<select name="identityProof" ng-model="identityProof" ng-change="changeProofOfIdentity()" ng-options="identity as identity.identityName for identity in identityProofList track by identity.identityId" id="identityProofList" class="form-control" data-placeholder="" size="1"></select>
I have Done this setup so I can get identity id and identity label in ng-onchange function.
As you can see I have used track by identity.identityId I wanted to select the option by only by identityId only i did
$scope.identityProof = {identityId:userDetails.identityId,identityName:""};
Now the option with the given value get selected, but when I try to get the $scope.identityProof i.e. select box value, I only get the identityId, not the identityName, as I can see the option selected have both the name and values, how can I get both? Do I need to manage it by using jquery or javascript by getting the label of the selected value and passing it as identityName? Or there is an option by which I can reload the selected object to have both the values?
You can use simple select instead of ng-option. See the following example and let me know.
<!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 name="identityProof" ng-model="identityProof" size="1">
<option ng-repeat="identity in identityProofList" value="{{identity}}">
{{identity.identityName}}
</option>
</select>
<span ng-if="identityProof">Selected value = {{identityProof}}</span>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.identityProofList = [{'identityName':'Passport','identityId':1}];
});
</script>
</body>
</html>
if I have a select element like this:
<select
ng-model="dispatchOutput"
ng-options="item as (item.output | uppercase) for item in searchFilterDispatcher.params"
class="form-control"
id="dispatchOutput" >
that populate the select with elements from a list of object that have the possibility to have multiple Strins with the same values, how can I avoid to show duplicate entries?
Use unique filter Unique-filter
angular.module("app",['angular.filter'])
.controller("ctrl",['$scope',function($scope){
$scope.searchFilterDispatcher={};
$scope.searchFilterDispatcher.params = [
{output:'abc', value:1},
{output:'abc', value:1},
{output:'xyz', value:2}
]
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>
<html>
<body ng-app="app" ng-controller="ctrl">
<select
ng-model="dispatchOutput"
ng-options="item as (item.output | uppercase) for item in searchFilterDispatcher.params | unique : 'output'"
class="form-control"
id="dispatchOutput" >
</select>
</body>
<html>
You should create a custom filter to filter out the unique values and apply that to ng-options:
app.filter('unique', function() {
return function (arr, field) {
return _.uniq(arr, function(a) { return a[field]; }); // (Assuming that you are using lodash in your app) if not use you custom logic here
};
});
Later in your template you could use this filter.
But I would suggest you to use https://github.com/a8m/angular-filter#unique
This has lot of filters already available for use and can serve your above purpose.
I have a simple dropdown that lists the available languages. The page starts in a default language and the user may select from the list.
The list is held in a JSON array and there is a scope variable to holds the currently selected language (being the default language upon start).
The dropdown (ul) is built using ng-repeat over the JSON, so the code would look:
<li ng-repeat="On_Lang in All_Langs"...>
Now, I want to skip the language that is currently being selected. For instance, if the list contains EN, FR, ES, PO, ZU and the current language is PO, when dropping the list it would show EN, FR, ES, ZU. If I select ES, it will be removed from the list and PO will appear.
I thought of adding an ng-if to the li but that is where the loop is taking place.
Since you didn't provide any code it's a bit hard to see what's your structure or anything, but for sure you can create a custom filter to "exclude" the selected option.
I made a simple demo and it should point you to the right direction, take a look:
(function() {
'use strict';
angular.module('app', [])
.controller('mainCtrl', function() {
var vm = this;
vm.languages = ["EN", "FR", "ES", "PO", "ZU"];
})
.filter('customFilter', function() {
return function(items, choice) {
if (!choice) {
return items;
}
return items.filter(function(element) {
return element !== choice;
});
}
});
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl as main">
<select ng-options="language for language in main.languages" ng-model="main.selectedLang">
<option value="" label="Select the language"></option>
</select>
<ul>
<li ng-repeat="language in main.languages | customFilter: main.selectedLang track by $index" ng-bind="language"></li>
</ul>
</body>
</html>
I have an input box in which user will enter text. Based on this text my UL list items should get filtered. For eg, on "Ab" in text box - Only Abbas and Abid must show in the <li> tags of the UL list.
index.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angularScript.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" />
<ul><li ng-repeat="x in people">{{x.name}}</li></ul>
</body>
</html>
angularScript.js
//1. appDeclaration
var app = angular.module('myApp',[]);
//2. controllers
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
$scope.people = [{"name":"Abbas"},{"name":"Tina"},{"name":"Abid"}];
});
Can someone help me out with some filter based on text in input so that only those lis are populated which match with the texts in input box?
First you'll need an ng-model in your <input> element.
<input ng-model="filter" type="text" />
And then your ng-repeat would look like:
<li ng-repeat="x in people | filter:filter">{{x.name}}</li>
Ref. https://docs.angularjs.org/api/ng/filter/filter
Angular is not able to reflect selected option in select input. Below is my complete code. Hospital One should have been selected, but not happening, what could be the reason ?
I've also put the same code snippet in JsBin also.
angular.module('testApp', [
])
.controller('AppController', function(){
var vm = this;
//
vm.schedule = {
date : "2015-5-25",
organization : {
"_id":"55df26cf756549c15b5fbcd2",
"name":"Hospital One",
"kind":"HOSPITAL",
"email":"somehospital1#hospital.com"
}
};
//
vm.user = {
name : "Some user name",
affiliates : [
{
"_id":"55df26ea756549c15b5fbcd5",
"createdOn":"2015-08-27T15:04:10.376Z",
"organization":{
"_id":"55df26cf756549c15b5fbcd2",
"kind":"HOSPITAL",
"name":"Hospital One",
"email":"somehospital1#hospital.com"
}
},
{
"_id":"55df26ea756549c15b5fbcd4",
"createdOn":"2015-08-27T15:04:10.375Z",
"organization":{
"_id":"55dbfd280713a3aa0d85158a",
"kind":"CLINIC",
"name":"Some Clinic",
"email":"someclinic#clinic.com"
}
}
]
};
})
;
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</head>
<body ng-controller="AppController as vm">
<h3>Selected Is : </h3>
<pre>{{ vm.schedule.organization | json }}</pre>
<h3>But selection is not reflecting in select</h3>
<select ng-model="vm.schedule.organization" ng-options="affiliate.organization as affiliate.organization.name for affiliate in vm.user.affiliates | orderBy : 'organization.name' track by affiliate.organization._id">
<option value="">-- Choose Organization --</option>
</select>
</body>
</html>
From ngOptions docs:
select as and track by:
Do not use select as and track by in the same expression. They are not
designed to work together.
Just remove the 'track by' and it'll work fine.
<select ng-model="vm.schedule.organization" ng-options="affiliate.organization as affiliate.organization.name for affiliate in vm.user.affiliates | orderBy : 'organization.name'">
working bin
-----EDIT------
Your options and your selected value are two different objects at first, therefore you'll always see the <-- Choose Organization --> option as selected before changing the select.
In order to solve that you need to bind the selected to be one of the options.
here's a working bin that solves that issue as well