Question

我有一个Angularjs控制器（Angularjs 1.5.6），该控制器从python脚本调用一个函数，该脚本返回一个元素数组。我试图做一个ng-repeat，以便它们出现在表中，但是由于某种原因，它不显示数组的元素。

html模板中的“执行”按钮触发函数getSID，该函数对返回数组的python脚本进行HTTP调用。同时，该函数还将范围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

您还需要将$ index括在引号中

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

Answer 2

未发布完整详细信息的罪行。我当时正在使用python flask，并意识到冲突是由于Jinja2引起的。

我必须使用{％raw} {％end raw}，以便Jinja2将其作为html处理。 Link

中的更多详细信息

现在我的代码看起来像这样，并且ng-repeat正在工作。

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

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

</tbody>
{% endraw %}

AngularJS ng-repeat无法正常工作

2 个答案: