angularjs ng-class: 根据选择的选项突出显示

Question

我想知道是否可以根据 selected 选项（来自 <select> 菜单）突出显示元素。

例如：如果我从 select 菜单中选择按名称对元素进行排序，名称将突出显示。否则，如果我选择按年龄排序：只有年龄会突出显示。

PS：我使用复选框来突出显示文本 class，效果很好。

<style>

.highlight {
    font-weight: bold;
    background-color: yellow;
}

</style>

<div ng-controller="SimpleController">

    Column: 
    <select ng-model="filterColumn">
        <option value="name">Name</option>
        <option value="age">Age</option>
    </select>

    Order : 
    <select ng-model="filterOrder">
        <option value="+">- to +</option>
        <option value="-">+ to -</option>
    </select>

    <br>
        <label> <input type="checkbox" ng-model="important">
       important (apply "important/bold" class)
        </label>
    <br>

    <ul>
        <li ng-repeat="user in users|orderBy:filterColumn: filterOrder == '-'">
                <span ng-class="{highlight: important}">{{user.name}}</span> <span>{{user.age}}</span>  
        </li>         
    </ul>

谢谢！

Answer 1

当然可以。查看下面的工作代码段。

ng-class 更新了负责呈现列表的代码的属性。

angular
.module('myApp', [])

// controller here
.controller('SimpleController', function($scope){
    $scope.users=[
        {
          "name": "James Doe",
          "age" : 16
        },
        {
          "name": "John Doe",
          "age" : 20
        },
        {
          "name": "Brian Jackson",
          "age" : 15
        },
        {
          "name": "Samuel Doe",
          "age" : 40
        },
        {
          "name": "Adam Brian",
          "age" : 18
        }
      ];
  });

.highlight { background: red;}

<!doctype html>
<html lang="fr" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>HTML5</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  
 <div ng-controller="SimpleController">

    Column: 
    <select ng-model="filterColumn">
        <option value="name">Name</option>
        <option value="age">Age</option>
    </select>

    Order : 
    <select ng-model="filterOrder">
        <option value="+">- to +</option>
        <option value="-">+ to -</option>
    </select>

    <br>
        <label> <input type="checkbox" ng-model="important">
       important (apply "important/bold" class)
        </label>
    <br>

    <ul>
        <li ng-repeat="user in users|orderBy:filterColumn: filterOrder == '-'">
                <span ng-class="filterColumn=='name' ? 'highlight' : ''">{{user.name}}</span> <span ng-class="filterColumn=='age' ? 'highlight' : ''">{{user.age}}</span>  
        </li>         
    </ul>

  </div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</body>
</html>

angularjs ng-class: 根据选择的选项突出显示

angularjs ng-class: Highlight based on selected option

angularjs

ng-class