Angular JS - display select option based on boolean value of dropdown

Question

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

No , I want to see Ascending and Descending instead of true or false — Naga Sai A
– Naga Sai A, Commented Dec 13, 2016 at 3:31
I am trying to see if there is any way ,can we alias boolean values to Ascending and Descending and at the same time want to use same boolean values without modifying object and using another temp object — Naga Sai A
– Naga Sai A, Commented Dec 13, 2016 at 3:32

Anish Agarwal · Accepted Answer · 2016-12-13 04:06:21Z

1

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>

edited Dec 13, 2016 at 4:06

answered Dec 13, 2016 at 3:33

Anish Agarwal

1,82120 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Naga Sai A Over a year ago

that will show xxxx and yyyy , instead of Ascending and Descending..I want to the dropdown options to be "Ascending" and "Descending"

Anish Agarwal Over a year ago

I have updated my code , please try with this.I hope it will work for you

Naga Sai A Over a year ago

modifying object and adding extra alias parameter may not be the solution

random_user_name Over a year ago

Code-only "try this" answers are the worst. Please explain what you are doing and how it solves the problem.

Collectives™ on Stack Overflow

Angular JS - display select option based on boolean value of dropdown

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related