javascript - 如何将多个项目添加到列表中

Question

我正在构建一个应用程序，用户可以在其中将项目添加到列表中，为了学习，我决定使用 Angular(我对此非常陌生)。到目前为止，我已经能够成功地将单个项目添加到该列表中，没有任何问题。不幸的是，每当我尝试在不刷新页面的情况下添加多个内容时，我都会收到错误 - 特别是“未定义不是函数”。

我花了比我想的更多的时间来尝试解决这个问题，我希望那里的专家可以帮助我。这是我到目前为止所拥有的:

Controller :

angular.module('streakApp')
    .controller('StreakController', function($scope) {

        // Removed REST code since it isn't relevant

        $scope.streaks = Streak.query();

        // Get user info and use it for making new streaks

        var userInfo = User.query(function() {
            var user = userInfo[0];
            var userName = user.username;
            $scope.newStreak = new Streak({
                'user': userName
            });
        });


    })
    .controller('FormController', function($scope) {
        // Works for single items, not for multiple items
        $scope.addStreak = function(activity) {
            $scope.streaks.push(activity);
            $scope.newStreak = {};

        };

    });

查看:

 <div class="streaks" ng-controller="FormController as formCtrl">
  <form name="streakForm" novalidate >
      <fieldset>
        <legend>Add an activity</legend>
        <input ng-model="newStreak.activity" placeholder="Activity" required />
        <input ng-model="newStreak.start" placeholder="Start" type="date" required />
        <input ng-model="newStreak.current_streak" placeholder="Current streak" type="number" min="0" required />
        <input ng-model="newStreak.notes" placeholder="Notes" />
        <button type="submit" ng-click="addStreak(newStreak)">Add</button>
      </fieldset>
  </form>

  <h4>Current streaks: {{ streaks.length }}</h4>

  <div ng-show="newStreak.activity">
  <hr>
  <h3>{{ newStreak.activity }}</h3>
  <h4>Current streak: {{ newStreak.current_streak }}</h4>
  <p>Start: {{ newStreak.start | date }}</p>
  <p>Notes: {{ newStreak.notes }}</p>
  <hr>
  </div>

  <div ng-repeat="user_streak in streaks">
  <!-- Removed most of this for simplicity -->
  <h3>{{ user_streak.fields }}</h3>
  </div>
</div>

Answer 1

您也可以发布 StreakController 的 html 吗？您的解决方案在这个 fiddle 中运行良好: http://jsfiddle.net/zf9y0yyg/1/

.controller('FormController', function($scope) {
    $scope.streaks = [];
    // Works for single items, not for multiple items
    $scope.addStreak = function(activity) {
        $scope.streaks.push(activity);
        $scope.newStreak = {};

    };

});

每个 Controller 中的 $scope 注入(inject)都不同，因此您必须在 FormController 中定义“条纹”。