Question

我有一张我正在使用的元素表。单击“Adauga la meniu”按钮后，我希望该元素的详细信息存储在名为currentMenu的对象数组中，并显示在addtomenu.html视图中。

addtomenu.html

<h3>My menu</h3>
      <table>
        <tr>
          <th>Aliment</th>
          <th>Calorii</th>
          <th>Proteine</th>
          <th>Lipide</th>
          <th>Carbohidrati</th>
          <th>Fibre</th>
        </tr>
        <tr ng-repeat="app in currentMenu">
          <td>{{ app.name }}</td>
          <td>{{ app.calorii }}</td>
          <td>{{ app.proteine }}</td>
          <td>{{ app.lipide }}</td>
          <td>{{ app.carbohidrati }}</td>
          <td>{{ app.fibre }}</td>
        </tr>
      </table>
<a href="#/tabel">Back to table</a>

一些app.js

app.config(function($routeProvider){
          $routeProvider
            .when("/tabel",{
               templateUrl: "tabel.html",
                          controller: "HomeController"
               })
            .when("/addtomenu",{
                          templateUrl: "addtomenu.html",
                          controller: "HomeController"
              })
                 });

一些HomeController

 $scope.currentMenu = [
                      {
                        name: '',
                        calorii: '',
                        proteine: '',
                        lipide: '',
                        carbohidrati:'' ,
                        fibre:  ''
                      }
                    ];

我添加到菜单功能

$scope.addItem = function (product){
                    alert("OK");
                    $scope.currentMenu.push({name: product.name, calorii: product.calorii, proteine: product.proteine, lipide: product.lipide, carbohidrati: product.carbohidrati, fibre: product.fibre});
                    window.location = '#/addtomenu';
                };

函数addItem将在这里调用：

tr ng-repeat="product in produse.products | orderBy:predicate:reverse | filter:query">
          <td class="left">{{ product.name }}</td>
          <td>{{ product.calorii }}</td>
          <td>{{ product.proteine }}</td>
          <td>{{ product.lipide }}</td>
          <td>{{ product.carbohidrati }}</td>
          <td>{{ product.fibre }}</td>
          <td><button ng-click="$parent.removeItem(product)" class="buttonimage"><img src="images/remove.png"/></button></td>
          <td><button ng-click="$parent.addItem(product)" class="buttonimage"><img src="images/addtomenu.png"/></button></td>
      </tr>

此处有完整的帖子：https://plnkr.co/edit/HyXt7hWGtle1gWrv1U42?p=preview

我希望你能让我明白什么是错的，谢谢你的帮助！

Answer 1

我认为您的添加功能已关闭。我自己对这一切都很陌生，但先试试这个：

基本上，您正在尝试将数组推送到同名数组中。这可能会造成某种搞砸。尝试将新添加的菜肴命名为其他内容。像这样：

var myDish = [
                      {
                        name: '',
                        calorii: '',
                        proteine: '',
                        lipide: '',
                        carbohidrati:'' ,
                        fibre:  ''
                      }
                    ];

currentMenu仍然是所有菜肴的阵列。

然后，我会建议您在尝试构建阵列之前使用数字ID。虽然没有直接的必要，但我知道这是最好的做法。在函数中使用此行来获取ID：

$ scope.myDish.id = $ scope.currentMenu.length + 1;

所以你的整个功能看起来像这样：

    $scope.addItem = function () {
    $scope.myDish.id = $scope.currentMenu.length + 1;
        $scope.currentMenus.push({
            id: $scope.myDish.id
        }, $scope.myDish);

        yourService.yourFunctiontoGetArray().update($scope.myDish);
        $scope.myForm.$setPristine();
        $scope.myDish = {
                            name: '',
                            calorii: '',
                            proteine: '',
                            lipide: '',
                            carbohidrati:'' ,
                            fibre:  ''
                          };
    };

要使其工作，您需要向services.js添加一个访问数据库的函数。我在之前的一个项目中使用了以下版本：

.service('yourService', ['$resource', 'baseURL', function ($resource, baseURL) {

    this.yourFunctiontoGetArray = function () {
        return $resource(baseURL + "menu/:id", null, {
            'update': {
                method: 'POST'
            }
        });
    };

注意：baseURL指向存储数据库的位置。像“127.0.01 / db.json”。当然，您需要将resource集成到您的项目中。

祝你好运！

push在AngularJS路由中不起作用

1 个答案: