Angular Essay Lesson II

I. List tables and other iterative elements

Ng-repeat is probably the most useful angular directive, which can create multiple copies of a set of elements at once, based on the items in the collection. You can use this instruction wherever you want to create a list of things.

Let's say we're writing a student roster system for our teachers, and of course we need to get student information from the server, but for the current example, we're going to define the model directly in the JavaScript code:

VAR students =[

{name: ' Mary contrary ', id: ' 1 '},

{name: ' Jack contrary ', ID: ' 2 '},

{name: ' Jill contrary ', ID: ' 3 '}

]

function Student ($scope) {

$scope. Students = students;

}

In order to display this student list, we can write the following code:

<ul ng-controller= "Student" >     <li ng-repeat= "student in students" >          <a href= "/student/view/{{ Student.id}} ">{{student.name}}</a>     </li></ul>

Ng-repeat will produce a copy of all HTML elements inside the tag, including the label of the put instruction. After this, we will see the output as (list output):

Mary Contrary Jack contrary Jill contrary

Link to/student/view/1/STUDENT/VIEW/2 according to the specific situation/STUDENT/VIEW/3

As we can see, modifying the Student information array will automatically refresh the rendered list, if we need to insert a new student information into the list, so to say:

$scope. Insert=function () {

$scope. Students.splice (1,0,{name: ' Tom ', ID: ' 4 '});

}

Then add a button to call the new function in the template

<button ng-click= "Insert ()" ></button>

We will now see Mary contrary Jack contrary Jill contrary Tom

The ng-repeat instruction can return the element ordinal of the current reference by $index, and the ng-repeat instruction returns a Boolean value through the $first $middle $last, telling you whether the current element is the first middle element or the last element in the collection.

You may need to use $index to display the travel number in the form sheet, so you can <td>{{$index by writing this sentence +1}}</td>

Two: Hide and show

Showing and hiding elements is a core feature for menu-context-sensitive tools and in many other cases. As with other features in angular, we drive UI refreshes by modifying the data model and then reacting to the UI through instruction changes.

The following will use Ng-show and ng-hide. The functions of these 2 instructions are equivalent, but the effect is the opposite, and they all display or hide the elements according to the expression you are passing. That is, ng-show will display the element when the expression is true, False when the element is hidden. And Ng-hide is just the opposite, which one of the instructions is more expressive of your intentions, which one you use.

The 2 instructions work by setting the element's style to Display:block according to the actual situation, displaying the element, setting it to Display:noen, hiding the element, and setting the element to Display:none to hide the element. Next, let's look at a small one.

<div ng-controller= "menu" Ng-app = ' myApp ' >     <button ng-click= "toggle ()" >toggle menu</button>     <ul ng-show= "show" >          <li ng-click= "stun ()" >stun</li>          <li ng-click= "Disin ()" > disin</li>          <li ng-click= "erase ()" >erase</li>     </ul></div<script type= "text/ JavaScript ">     angular.module (' myApp ', []). Controller (' menu ', function ($scope) {          $scope. Show = false;          $scope. Toggle = function () {               $scope. Show =! $scope. Show;          }     })     </script>

Angular Essay Lesson II