爲什麼我的angularJS不能在DOM中正確更新？

所以，我正在使用AngularJS路由和參數進行應用。我設置了控制器，出於某種原因，當我轉到其中一個頁面時，我的應用程序不會從angularJS代碼中提取數組，也不會添加我的項目！有任何想法嗎？爲什麼我的angularJS不能在DOM中正確更新？

這裏是我的角度：

.controller("foodController", function ($scope) { 
    $scope.addItem; 
    $scope.foodItem = ""; 

    $scope.foodArray = ['Milk', 'PB&J']; 

    //add items here 
    $scope.addItem = function() { 
     /*if ($scope.foodItem = '') { 
      alert('What did the child eat?'); 
     } else {*/ 
     $scope.foodArray.push($scope.foodItem); 
     $scope.foodItem = ''; 
    }; 
});

這裏是我的HTML：

<body ng-app="myApp" ng-controller="foodController"> 

<form ng-submit="addItem()"> 
    <h1>Food Chart</h1> 
    <input type="text" placeholder="What did the child eat today?" ng-model="foodItem" /> 
    <button type="submit" id="submit">Submit</button> 
</form> 
{{ foodItem }} 
<section> 
    <h1>Food Log</h1> 
    <tr ng-repeat="item in foodArray"> 
     <td> {{ item }}</td> 
     <td> 
      <button ng-click="removeItem(item)"> Remove Item</button> 
     </td> 
    </tr> 
</section>

預先感謝您！

來源

2015-10-16 Xiggy

我沒看到你指定的地方控制器包裝你的HTML。 – Marc

當我複製/粘貼時，我遺失了身體標記！我的錯！ – Xiggy

是否正確顯示了「{{foodItem}}」？ –

您需要在表格中查看tr

遍歷行試試這個：

<div ng-controller="foodController"> 
    <form ng-submit="addItem()"> 
    <h1>Food Chart</h1> 
    <input type="text" placeholder="What did the child eat today?" ng-model="foodItem"/> 
    <button type="submit" id="submit">Submit</button> 
    </form> 
    {{ foodItem }} 
    <section> 
    <h1>Food Log</h1> 
    <table> 
     <tbody> 
     <tr ng-repeat="item in foodArray"> 
     <td> {{ item }}</td> 
     <td> 
      <button ng-click="removeItem(item)"> Remove Item</button> 
     </td> 
     </tr> 
     </tbody> 
    </table> 
    </section> 
</div>

來源

2015-10-16 18:46:42 arg20

順便說一下，如果你使用路由或者在你提供的代碼之外聲明你的控制器，那麼我在ng-controller中添加了一個div，刪除那個div – arg20

我們去了。謝謝。我沒有花太多時間使用表，這就是爲什麼我試圖使用他們這個項目。非常感謝！現在完美的工作！ – Xiggy

是的，我剛剛在

和標籤中添加了標籤。我不敢相信我忘了他們！ – Xiggy

包你TR表中的元素

<section> 
     <h1>Food Log</h1> 
     <table> 

     <tr ng-repeat="item in foodArray"> 
     <td> {{ item }}</td> 
     <td> 
      <button ng-click="removeItem(item)"> Remove Item</button> 
     </td> 
     </tr> 
     </table> 

    </section>

這裏是一個工作花掉 http://plnkr.co/edit/JYE3tVLubyM6FDbRm54k?p=preview

來源

2015-10-16 18:49:12 TimCodes

我希望我可以點擊「接受」爲你們！謝謝你！我絕對需要在桌子上做更多的工作，並自己練習。 – Xiggy

相關問題

爲什麼我的angularJS不能在DOM中正確更新？

回答

相關問題