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

How to add multiple items to a list

本文关键字：添加 列表 项目      更新时间：2023-09-26

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

我

花了比我关心的更多的时间来考虑解决这个问题，我希望那里的专家可以帮我一把。这是我到目前为止所拥有的：

控制器：

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>

你能也发布StreakController的html吗？您的解决方案在此小提琴中运行良好：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 = {};
    };
});

每个控制器中注入$scope是不同的，因此您必须在 FormController 中定义"条纹"。

您的问题来自：

.controller('FormController', function($scope) {
        // Works for single items, not for multiple items
        $scope.addStreak = function(activity) {
            $scope.streaks.push(activity); 
                    ^^^^^^
                    // Streaks is initialized in another controller (StreakController) 
                    // therefore, depending of when is instantiated StreakController,
                    // you can have an error or not
            $scope.newStreak = {};
        };
});

更好的设计是实现 StreakService，并将该服务注入到您需要的控制器中。当然，在 FormController 中初始化$scope.streaks会使您的代码正常工作，但这不是 Form Controller 初始化此数据的责任。

我假设FormController是StreakController的嵌套控制器，因此它们共享相同的范围。如果这适用于单个对象，它应该适用于多个对象，问题是你不能只使用 push 将对象数组推送到条纹，你可以for loop数组并单独添加它们或使用 push.apply 技巧。我认为Undefined is not a function.的原因是因为 Stack.query（） 返回一个元素而不是元素数组，因此，方法推送在$scope.streaks上不存在。

http://jsbin.com/jezomutizo/2/edit

相关文章：