Question

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

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

PS：我使用了一个复选框来突出显示课程，但它运行正常。

<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属性已更新。

＆＃13;

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
        }
      ];
  });

＆＃13;

.highlight { background: red;}

＆＃13;

<!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>

＆＃13;

angularjs ng-class：根据所选选项突出显示

1 个答案: