为什么我的angularJS在DOM中无法正确更新？

Question

So, I'm working on an application with AngularJS routes and parameters. 因此，我正在使用AngularJS路由和参数的应用程序。 I have my controllers set up, and for some reason when I go to one of the pages my application isn't pulling the array from the angularJS code, nor adding in my items! 我已经设置了控制器，由于某种原因，当我转到其中一个页面时，我的应用程序没有从angularJS代码中提取数组，也没有添加我的项目！ Any ideas? 有任何想法吗？

Here is my angular: 这是我的角度：

.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 = '';
    };
});

Here is my HTML: 这是我的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>

Thank you in advance! 先感谢您！

Answer 1

You need a table to iterate over rows with your tr 您需要一个表来用tr遍历行

Try this instead: 尝试以下方法：

<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>

Answer 2

wrap you tr in a table element 将您的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>

Here is a working plunk http://plnkr.co/edit/JYE3tVLubyM6FDbRm54k?p=preview 这是工作正常的小精灵http://plnkr.co/edit/JYE3tVLubyM6FDbRm54k?p=preview

为什么我的angularJS在DOM中无法正确更新？

问题描述

2 个解决方案

解决方案1
3 已采纳 2015-10-16 18:46:42

解决方案2
3 2015-10-16 18:49:12

为什么我的angularJS在DOM中无法正确更新？

问题描述

2 个解决方案

解决方案1 3 已采纳 2015-10-16 18:46:42

解决方案2 3 2015-10-16 18:49:12

解决方案1
3 已采纳 2015-10-16 18:46:42

解决方案2
3 2015-10-16 18:49:12