Question

所以，我正在使用AngularJS路由和参数处理应用程序。我设置了控制器，出于某种原因，当我进入其中一个页面时，我的应用程序不是从angularJS代码中提取数组，也不是添加我的项目！有任何想法吗？

这是我的角色：

.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

您需要一个表格来使用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

将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中没有正确更新？

2 个答案: