Angularjs use Ng-repeat and ng-if to implement data erasure display Example "for display of form data" _angularjs

This article describes the Angularjs use of ng-repeat and ng-if to achieve the deletion of data display effect. Share to everyone for your reference, specific as follows:

1. First, repeat the ng-repeat directive.

Ng-repeat can be repeated display of content, such as we can write the following code

<script>
  angular.module ("MyApp", []). Controller ("Mycontroller", function ($scope) {
    $scope. data=[{ Name: "Yu1", Age:10,partment: "Product Department"},
          {name: "Yu2", Age:11,partment: "Products"},
          {name: "Yu3", Age:12,partment: " Division "},
          {name:" Yu4 ", Age:13,partment:" Division "},
          {name:" Yu5 ", Age:14,partment:" Material Department "},
          {name:" Yu6 ", age:15, Partment: "Material Department"}
   )
</script>
<div class= "table-responsive" >
  <table Class = "Table table-bordered" >
     <thead>
       <th> name </th>
       <th> age </th>
       <th> Department </th>
     </thead>
   <tbody>
    <tr ng-repeat= "member in Data" >
       <td>{{member.name}}</td>
       <td>{{member.age}}</td>
       <td>{{member.partment }}</td>
    </tr>
   </tbody>
  </table>
</div>

The display effect is as follows:

2. The problem at this point is that if we were to delete the staff of the Department as "product Department"

Then you can use the Ng-repeat+ng-if method, so that you can achieve a simple front-end deletion

All we need to do is simply add ng-if= "member.partment==" to the back of the Ng-repeat ' product section.

The code is modified as follows:

<TR ng-repeat= "member in Data" ng-if= "member.partment== ' product Department '" >

The effect is:

More readers interested in ANGULARJS related content can view the site topics: "Angularjs Introduction and Advanced Tutorials" and "ANGULARJS MVC Framework Summary"

I hope this article will help you to Angularjs program design.