推在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整合到您的項目中。

祝你好運！