Angularjs ng-repeat не работает должным образом

Question

У меня есть контроллер Angularjs (Angularjs 1.5.6), который вызывает функцию из скрипта Python, которая возвращает массив элементов.Я пытаюсь сделать ng-repeat, чтобы они появлялись в таблице, но по какой-то причине он не отображает элементы массива.

Кнопка «Перейти» в HTML-шаблоне вызывает функциюgetSID, который делает HTTP-вызов скрипта Python, который возвращает массив.В то же время функция также устанавливает для области действия showval значение true, чтобы таблица в html отображалась только после нажатия кнопки.

<script>
    angular.module('navigator', [])
        .controller('HomeCtrl', function($scope, $http) {   
        $scope.getSid = function (sid) {
        console.log(sid);           
            $http({
                    method: 'POST',
                    url: '/getMachine',
                    data: {sid:$scope.sid}
                    }).then(function(response) {
                    $scope.machines = [];
                    var object1 = response.data;
                    $scope.machines.push(object1);                      

                    //console.log(object1);
                    console.log($scope.machines);
                    $scope.showval = true;

                    }, function(error) {
                      console.log("hello");
                      console.log(error);
                    });
            };
        })

HTML-код:

 <div class="input-group mb-3 input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text">Enter the SID</span>
  </div>
  <input type="text" class="form-control" ng-model="sid">
  <button type="button" class="btn btn-outline-secondary" ng-click="getSid(sid)" ng-model="show" >
    GO!
  </button>
</div>
<div ng-show="showval">
<table class="table table-dark" >
<thead>
<tr>
  <th scope="col">SID</th>
  <th scope="col">Cluster</th>
  <th scope="col">Node</th>
  <th scope="col">Physical ip</th>
  <th scope="col">Logical ip</th>
  <th scope="col">Logical Host</th>
  <th scope="col">Physical Host</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in machines">

  <td>{{item}}</td>
</tr>

</tbody>
</table>
</div>

Я гуглил ng-repeat и так несколько примеров в plunker, и я следую тому же коду, но мой код, похоже, не работает.Был бы благодарен за любую помощь.Спасибо за ваше время.

Answer 1

Виновен в том, что не опубликовал полную информацию.Я работал с python flask и понял, что конфликт связан с Jinja2.

Мне пришлось использовать {% raw} {% ​​end raw}, чтобы Jinja2 обрабатывал его как html.Подробнее об этом Ссылка

Теперь мой код выглядит так, и ng-repeat работает.

{% raw %} 
<tbody>
<tr ng-repeat="item in machines" >

  <td>{{item}}</td>
</tr>

</tbody>
{% endraw %}

Answer 2

Вам также необходимо заключить трек в $ index в кавычки,

<tr ng-repeat="item in machines track by $index">