как установить значение int для строки в угловых

Question

У меня есть значение в таблице, которое в настоящее время является целым числом, и я хочу передать эти переменные в таблицу на веб-странице, но я хочу изменить эти значения на фактические имена вместо чисел, есть ли способ сделать это, установивобласть действия в контроллере, а затем отправить эту строку в html?

, например:

Это будет html-код для строки и заголовка таблицы, а затем для данных таблицы.

<thead>
    <tr>
        <th>Foo</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat= "x in names">
        <td>{{ x.bar }}</td>
    </tr>
</tbody>

Я не знаю синтаксиса для создания области видимости для этого в угловых и затем толкать это в HTML или куда он пойдет.

Таблица в настоящее время показывает 1 в месте бара.Я хочу, чтобы он на самом деле говорил bar, но регистрировался как 1. Я не знаю, имеет ли это какой-то смысл.

Я видел кое-кого, где они ставят

app.filter('thisfilter', function() {
    return function (bar)

    if((bar) || bar < 1){
        return status_options;
    }else{
        var lastdigit = bar % 100;

        if(lastdigit === 1){
            return 'audi'
        } else if(lastdigit === 2){
            return 'bmw'
        } else if(lastdigit === 3){
            return 'mercedes'
        } else if(last digit === 4){
            return 'lexus'
        }
    }
}

, а затем они подключают его обратно в HTML

<td>{{ x.foo | thisfilter }}</td>

Answer 1

Вот очень надуманный пример, демонстрирующий использование фильтра для отображения текста вместо числового значения.

angular.module('app', [])
  .filter('valueToText', () => {
    return (input) => {
      switch (input) {
        case 1:
          return 'bar';
        case 2:
          return 'foo'
        default:
          return input;
      }
    }
  })
  .controller('ctrl', ($scope) => {
    $scope.names = [{
      value: 1
    }, {
      value: 2
    }, {
      value: 2
    }, {
      value: 'foobar'
    }];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <ul>
    <li ng-repeat="x in names">{{x.value | valueToText}}</li>
  </ul>
</div>