Question

我有一个简单的清单

<ul>
    <li ng-repeat="spiel in spielListe">Do something</li>
</ul>

和控制器（完美连接）

$scope.spielListe = [];

此外，还有一个更大的方法将一些对象推送到此结构中的数组：

var spielObjekt = {team1: "Teamname 1", team2: "Teamname 2", court: ""};
$scope.spielListe.push(spielObjekt);

最后，数组看起来像这样：

对象的内容并不重要，因为angular应该执行ng-repeat两次并且只显示我的文本两次 - 但是html页面保持为空。

我做错了什么？我哪里可以搞错？

更新

.push似乎有问题。我将一个具有相同结构的Object放入我的数组中，该数组在ng-repeat中被识别。但是之后推入的2个对象没有显示出来。问题

更新2

感谢您的帮助 - 错误是，DOM中的几个元素内部有ng-controller =“contentCtrl”。这意味着控制器被多次调用并且对象被刷新 - 不明白

Answer 1

所提供的数据缺乏明确性。根据您的问题，我认为您正在寻找以下案例之一

案例1

如果您希望对象为{team1: "Teamname 1", team2: "Teamname 2", court: ""}，则在输出中只打印一次，因为这是一个对象。

以下是上述情况的样本..

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="spiel in spielListe">{{spiel.team1}}</li>
        </ul>
        <button ng-click="addItems()">Add</button>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('MyCtrl', function ($scope, $http) {
            $scope.spielListe = [];
            $scope.addItems = function () {

                var spielObjekt = {
                    team1: "Teamname 1",
                    team2: "Teamname 2",
                    court: ""
                };
                $scope.spielListe.push(spielObjekt);
            }
        });
    </script>

</body>

</html>

案例2

但是如果您仍然希望在输出中使用三次，则需要修改JSON结构，如下所示

["Teamname 1", "Teamname 2", ""]

和ng-repeat as

<li ng-repeat="spiel in spielListe">{{spiel}}</li>

或JSON结构为

[{TeamName: "Teamname 1"}, {TeamName: "Teamname 2"}, {TeamName: ""}]

和ng-repeat as

<li ng-repeat="spiel in spielListe">{{spiel.TeamName}}</li>

因为循环只能通过不通过单个对象的对象数组来完成。以下是该实现的示例。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="spiel in spielListe">{{spiel}}</li>
        </ul>
        <button ng-click="addItems()">Add</button>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('MyCtrl', function ($scope, $http) {
            $scope.spielListe = [];
            $scope.addItems = function () {

                var spielObjekt = [
                    "Teamname 1", "Teamname 2", ""
                ];
                $scope.spielListe = $scope.spielListe.concat(spielObjekt);
            }
        });
    </script>

</body>

</html>

Answer 2

您的spielObjekt变量只是一个对象，并且您将一个对象推送到一个数组，因此巡视<li>应该只打印一次。所以，spielObjekt变量就像这样..

var spielObjekt = [{team1: "Teamname 1"},{team2: "Teamname 2"},{court: ""}];

你没有使用推送，只需将spielObjekt变量设置为$scope.spielListe。你的<li>将打印3次。

$scope.spielListe = [];
var spielObjekt = [{team1: "Teamname 1"},{team2: "Teamname 2"},{court: ""}];
$scope.spielListe = spielObjekt;

Answer 3

案例1：您正在$scope.spielListe中传递单个对象。因此，ng-repeat只迭代一次。

案例2：如果您将spielObjekt作为对象数组，那么您必须迭代它以推送$scope.spielListe数组中的两个对象。

工作演示：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
  $scope.spielListe = [];
  var spielObjekt = [
             {team1: "Teamname 1", team2: "Teamname 2", court: ""},
             {team3: "Teamname 3", team4: "Teamname 4", court: ""}
             ];
  
  for (var i in spielObjekt) {
    $scope.spielListe.push(spielObjekt[i]);
  }

  console.log($scope.spielListe);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="spiel in spielListe">Do something</li>
  </ul>
</div>

在这里，您可以在代码片段中看到$scope.spielListe包含2个对象的数组且工作正常。

Angular JS ng-repeat不使用Array of Objects

3 个答案: