为什么我的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中正确更新？

回答

相关问题