CODEWITHSUNDEEP
javascripthtmlangularjsdomupdating
Xiggy
Xiggy

Reputation: 33

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

So, I'm working on an application with AngularJS routes and parameters. 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! 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: 

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

Upvotes: 1

Views: 69

Answers (2)

TimCodes
TimCodes

Reputation: 365

wrap you tr in a table element

<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

Upvotes: 3

arg20
arg20

Reputation: 4991

You need a table to iterate over rows with your 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>

Upvotes: 3

Related Questions