there is a directive:

<div> <form class="form-inline"> <div class="form-group"> <label>Name</label> <input type="text" class="form-control" ng-model="user.name"> </div> <div class="form-group"> <label>Email</label> <input type="email" class="form-control" ng-model="user.email"> </div> <div class="form-group"> <label>Address</label> <input type="email" class="form-control" ng-model="user.address"> </div> <div class="form-group"> <label>Phone</label> <input type="number" class="form-control" ng-model="user.phone"> </div> <div class="form-group"> <label>City</label> <input type="number" class="form-control" ng-model="user.city"> </div> <div class="form-group"> <label>Street</label> <input type="number" class="form-control" ng-model="user.street"> </div> <button type="submit" class="btn btn-default" ng-click="UserListCtrl.addUser();">Create User</button> </form> <table class="table" class="user-list" ng-if="UserListCtrl.users.length"> <caption>Users</caption> <thead> <tr> <th>#</th> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Street</th> <th>Sity</th> <th>State</th> </tr> </thead> <tbody> <user-item ng-repeat="user in UserListCtrl.users" user="user"></user-item> </tbody> </table> </div>

There is another directive <user-item ng-repeat="user in UserListCtrl.users" user="user"></user-item>

When a user is added, then from the layout it is clear what should add elements to table> tbody

 <tr> <th scope="row">{{ UserItemCtrl.user.index }}</th> <td>{{ UserItemCtrl.user.name }}</td> <td>{{ UserItemCtrl.user.email }}</td> <td>{{ UserItemCtrl.user.phone }}</td> <td>{{ UserItemCtrl.user.street }}</td> <td>{{ UserItemCtrl.user.city }}</td> <td>{{ UserItemCtrl.user.state }}</td> </tr>

But when I add angular adds under the form tag instead of table> tbody

enter image description here

  • That is why you shouldn’t put into the directive only a part of the standard element - Grundy
  • This is a feature for processing invalid elements inside the table tag. Which may also depend on the browser - Grundy
  • one
    the problem will be solved if you use the directive not as an element but as the attribute <tr user-item ng-repeat="user in UserListCtrl.users" user="user"></tr> - Grundy
  • @Grundy thanks - Khotey Vitaliy
  • I remember exactly how I answered a similar question, but I cannot find it - Grundy

1 answer 1

The problem is how the browser handles the presence of an invalid nested element.

Only elements tr are allowed to be inserted into the tbody element. If instead of tr there is something else, then the result may depend on the browser.

  • may be normal behavior
  • an invalid item can be moved up or down from the table
  • anything else.

Since, in the example, the user-item element is added to tbody , in this case, chrome tbody this element in front of the table, then executes the angular code and replaces the element with the tr element.

To avoid the removal, you need to use the user-item not as an element, but as an attribute

 <tr user-item ng-repeat="user in UserListCtrl.users" user="user"></tr>

In this case, inside tbody there is an allowed tr and no removal occurs.