推在AngularJS路由中不起作用

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> 

完全plunker这里：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整合到您的项目中。

祝你好运！