为什么我的 angularJS 没有在 DOM 中正确更新？

Question

因此，我正在开发具有 AngularJS 路由和参数的应用程序。我设置了我的控制器，出于某种原因，当我转到其中一个页面时，我的应用程序没有从 angularJS 代码中提取数组，也没有添加我的项目！有任何想法吗？

这是我的 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 = '';
    };
});

这是我的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>

提前致谢！

Answer 1

您需要 table 来使用 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>

Answer 2

用 table 元素包裹你 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

为什么我的 angularJS 没有在 DOM 中正确更新？

Why isn't my angularJS updating correctly in the DOM?

html

javascript

dom

updating

angularjs