angularjs change element based on dropdown select

Question

Using angularjs

I have 3 select dropdowns and a button to get a json list

Focus select dropdown looks like this:

<select id='sort' ng-model='sort'>
  <option value='1'>ID</option>
  <option value='2'>Departmentname</option>
  <option value='3'>Number of employees</option>
</select>
<button ng-click="getinfo()">GET INFO</button>

The table looks like this

<table>
<tr> <td>{{ depid }}</td> <td>{{ depname }}</span></td> <td>{{ depemp }}</td></tr>

In the controller I have:

$scope.depid = "Department id";
$scope.depname = "Departmentname";
$scope.depemp = "Number of employees";

$scope.getinfo = function() {
  var url = "";  
  ...
}

Based on selection "sort" I want the sort column to be bold/strong or uppercase.

How do I do thIS?

Omri Aharon · Accepted Answer · 2015-04-14 20:29:53Z

2

You can use ng-class on the td elements:

<tr> 
    <td ng-class="{bold : sort == 1}">{{ depid }}</td> 
    <td ng-class="{bold : sort == 2}">{{ depname }}</span></td> 
    <td ng-class="{bold : sort == 3}">{{ depemp }}</td>
</tr>

And add a CSS rule:

.bold { 
    font-weight: bold;
}

Here's a Fiddle demonstration.

answered Apr 14, 2015 at 20:29

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

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

2 Comments

cord1 Over a year ago

After testing the header becomes bold before loading the table in the correct sort order. The change must come from within the controller. Any idea?

Nachshon Schwartz Over a year ago

After the getInfo function set a new variable as the value of the sort... call it something like sortedBy so if getInfo is a promise then do getInfoPromise.then(function(){sortedBy = sort})

cord1 · Accepted Answer · 2015-04-15 06:44:19Z

0

Following Omri Aharon I changed ng-class="{bold : sort == 1}" to ng-class="{bold : sortby == 1}" and followed Nayish I put following inside controller $scope.getinfo = function() { var url = "";
... $http.get(url) .success(function(response) { $scope.names = response; $scope.sortby = $scope.sort;}); }

Thanks a lot to the two of you!

answered Apr 15, 2015 at 6:44

cord1

31 bronze badge

Collectives™ on Stack Overflow

angularjs change element based on dropdown select

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related