Common characteristics in AngularJS (II.)

3. Lists, 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.

For example, a student roster system needs to obtain student information from the server, and the model is now defined in JavaScript code:

1 var students = [{name: ' Mary ', id: ' 1 '},2                     {name: ' Jack ', ID: ' 2 '},3                     {name: ' Jill ', ID: ' 3 '}]; 4     function Studentlistcontroller ($scope) {5         $scope. Students = students; 6     }

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

1 <ulNg-controller= "Studentlistcontroller">2     <binng-repeat= "Student in students">3         <ahref= "/student/view/{{student.id}}">{{Student.name}}</a>4     </Li>5 </ul>

Ng-repeat will generate a copy of all HTML elements inside the tag, including the label of the put instruction, showing the result as follows:

　　

Link to/STUDENT/VIEW/1,/STUDENT/VIEW/2, and/STUDENT/VIEW/3, respectively, depending on the situation.

The ng-repeat directive can return a Boolean value by $first, $middle, and $last by $index returning the ordinal of the currently referenced element (similar to index in the <s:iterator> tag).

4. Hide and Show

Showing and hiding elements is a core feature for menus, context-sensitive tools, and many other situations.

The function of the ng-show and ng-hide instructions is equivalent, but the effect is the opposite.

Ng-show the element is displayed when the expression is true, False when the element is hidden, and Ng-hide is the opposite.

How it works: Set the element's style to Display:block to show elements according to the actual situation, and set to Display:none to hide the element.

5. CSS Classes and styles

Now that you can set CSS classes and styles dynamically in your app, you can only use the {{}}} interpolation syntax to bind them, or even construct a partial match of CSS class names in the template.

{    color: gray;}

Use the following template to display the functionality as disabled:

1 <DivNg-controller= "Menucontroller">2     <ul>3         <Liclass= "menu-disabled-{{isdisabled}}"Ng-click= "Disabledit ()">Click</Li>4         ...5     </ul>6 </Div>

This allows you to set the Isdisabled property through the controller:

1 function Menucontroller ($scope) {2     false ; 3 4     function () {5         true ; 6     }7 }

This way, only isdisabled is true, the MENU-DISABLED-TRUE,CSS style will work when it is stitched.

The same applies when binding inline styles using interpolation, such as style = "{{some.expression}}".

However, since this approach is not flexible and late maintenance is difficult, it is recommended to use Ng-class and ng-style directives in Angular.

All two instructions can accept an expression, and the result of the expression execution may be one of the following values:

• A string that represents the CSS class name, separated by a space
• CSS class an array group
• CSS class name to Boolean value mapping

We can implement features that display error and warning messages as follows:

1 . Error {2 background-color:red;3 }4 . Warning {5 Background-color:yellow;6 }7 <DivNg-controller= "Headercontroller">8     ...9     <DivNg-class= "{error:iserror, warning:iswarning}">{{MessageText}}</Div>Ten     ... One     <ButtonNg-click= "ShowError ()">Simulate Error</Button> A     <ButtonNg-click= "showwarning ()">Simulate Warning</Button> - </Div> - function Headercontroller ($scope) { the $scope. IsError = false; - $scope. iswarning = false; -      - $scope. ShowError = function () { + $scope. MessageText = ' This was an error '; - $scope. IsError = true; + $scope. iswarning = false; A     }; at      - $scope. showwarning = function () { - $scope. MessageText = ' Just a warning, please carry on. '; - $scope. iswarning = true; - $scope. IsError = false; -     } in}

You'll find that it's elegant and easy to maintain, and you can do something a lot better, such as highlighting the selected rows in the table.

Common characteristics in AngularJS (II.)