Javascript 为什么不是'；我的angularJS在DOM中更新不正确吗？_Javascript_Html_Angularjs_Dom_Updating

Javascript 为什么不是'；我的angularJS在DOM中更新不正确吗？

javascript html angularjs dom

Javascript 为什么不是'；我的angularJS在DOM中更新不正确吗？,javascript,html,angularjs,dom,updating,Javascript,Html,Angularjs,Dom,Updating,所以，我正在开发一个带有AngularJS路由和参数的应用程序。我已经设置了控制器，出于某种原因，当我转到其中一个页面时，我的应用程序没有从angularJS代码中提取数组，也没有添加我的项目！有什么想法吗以下是我的观点： .controller("foodController", function ($scope) { $scope.addItem; $scope.foodItem = ""; $scope.foodArray = ['Milk', 'PB&

所以，我正在开发一个带有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>


食物表
提交
{{foodItem}}
食物日志
{{item}}
删除项目

提前谢谢你

您需要一个表来使用

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>


食物表
提交
{{foodItem}}
食物日志
{{item}}
删除项目

您需要一个表来使用

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>


食物表
提交
{{foodItem}}
食物日志
{{item}}
删除项目
将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>


食物日志
{{item}}
删除项目

这是一个正在运行的程序
将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>


食物日志
{{item}}
删除项目

这是一个正在运行的程序
我看不到您在哪里指定哪个控制器包装您的HTML。我在复制/粘贴时省略了body标记！我错了！{{foodItem}}
是否正确显示？模块定义如何？为什么要定义两次$scope.addItem
？{{foodItem}}显示正确-不幸的是，数组没有更新。我看不出有什么大问题。至于模块定义，这是代码的另一部分——在顶部附近，我没有复制/过去。有没有帮助？它不会在我拥有的任何其他页面上引起问题。我看不到你在哪里指定哪个控制器包装你的HTML。我在复制/粘贴时省略了body标记！我错了！{{foodItem}}
是否正确显示？模块定义如何？为什么要定义两次$scope.addItem
？{{foodItem}}显示正确-不幸的是，数组没有更新。我看不出有什么大问题。至于模块定义，这是代码的另一部分——在顶部附近，我没有复制/过去。有没有帮助？它不会在我的任何其他页面上引起问题。顺便说一句，我添加了一个带有ng控制器的div，如果您正在使用路由或在您提供的代码之外声明了控制器，请删除该div。非常感谢。我没有花太多时间使用表，这就是为什么我要在这个项目中使用它们。非常感谢你！现在效果很好！是的，我刚刚添加了和标签。真不敢相信我竟然忘了！顺便说一句，我添加了一个带有ng控制器的div，如果您使用的是路由，或者在您提供的代码之外声明了控制器，请删除该div。非常感谢。我没有花太多时间使用表，这就是为什么我要在这个项目中使用它们。非常感谢你！现在效果很好！是的，我刚刚添加了和标签。真不敢相信我竟然忘了！我希望我能为你们两个点击“接受”！谢谢你！我肯定需要做更多的工作与表格和实践与他们在我自己。我希望我可以点击“接受”为你们两个！谢谢你！我肯定需要做更多的工作与表和实践与他们在我自己。