Shulou(Shulou.com)06/03 Report--

This article mainly introduces "the introduction of views and instructions in Angularjs". In daily operation, I believe that many people have doubts about the introduction of views and instructions in Angularjs. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "views and instructions in Angularjs". Next, please follow the editor to study!

Introduction to AngularJS views and instructions

Before I begin, let me first set up a simple AngularJS application that you can use to experience the examples in this article:

Angular.module ("myapp", []) .controller ("MyController", function ($scope) {/ / empty controller function}); AngularJS instruction

The AngularJS view mixes the data from the model into the HTML template. You can use the AngularJS directive to tell AngularJS how to mix data into the HTML template. This article will cover the most commonly used AngularJS instructions.

Interpolation instruction

Interpolation instruction is one of the most basic instructions in AngujarJS. The interpolation instruction inserts the result of the expression into the HTML template. You can use the {{}} symbol to mark where the expression is inserted. Here is an example:

{{myData.text}}

The HTML template is contained in the element of the div that has the ng-controller attribute. Inside the HTML template is a span element, and inside is an interpolation instruction. This directive instructs AngularJSmyData.text to insert a data value at a given location.

The interpolation instruction can also insert data returned from the function of the model object. Here is an example:

{{myData.textf ()}} angular.module ("myapp", []) .controller ("MyController", function ($scope) {$scope.myData = {}; $scope.myData.textf = function () {return "A text from a function";};})

In this example, the interpolation instruction {{myData.textf ()}} calls the function $scope on the model object myData.textf () and inserts the text returned from that function into the HTML template.

The textf () function is inserted into the object within the $scope.myData controller function, as you can see in the example.

Ng-bind instruction

The ng-bind instruction is an alternative to the interpolation instruction. You can use it through ng-bind by inserting an attribute in the HTML element where you want AngularJS to insert data. Here is an example:

This inserts the data returned by the myData.text () function into the body of the span element. Note that the expression in attribute {{}} is not surrounded by a required ng-bind.

Escape HTML from the model

If the data obtained from the model contains HTML elements, those elements are escaped before being inserted into the HTML template. Escape means that HTML is displayed as text, not HTML.

This is done to prevent HTML injection attacks. For example, in a chat application, someone might insert an element with JavaScript in a chat message. If this element is not escaped, anyone who sees the chat message may execute the element. As HTML escapes, the element appears as text only.

You can disable HTML escape using the ng-bind-html-unsafe directive, as follows:

You should be very careful when disabling HTML escape. Make sure that no untrusted HTML is displayed.

Conditional rendering

AngularJS can show or hide HTML based on the state of the data in the model. You can use a set of AngularJS directives created specifically for this purpose. I will introduce these instructions in the following sections.

Ng-show + ng-hide instruction

The ng-show and ng-hide instructions are used to show or hide HTML elements based on the data in the model. The two instructions do the same thing, but opposite to each other. Here are two examples:

Angular.module ("myapp", []) .controller ("MyController", function ($scope) {$scope.myData = {}; $scope.myData.showIt = true;})

This example creates two span elements. One has a ng-show instruction and the other has a ng-hide instruction. Both instructions look at the myData.showIt Boolean variables to determine whether they should show or hide span elements. The ng-show directive displays the element if the model value is true and hides the element if the model value is false. The ng-hide instruction does the opposite: span hides the element if the model value is true, and displays it if the model value is false.

Notice how the controller function sets myData.showIt to true. This means that the above example shows the first span element and hides the second.

The HTML element (span is the element in this case) hides display: none; using the CSS attribute. This means that the HTML element still exists in DOM. They're just invisible.

Ng-switch instruction

Ng-switch use this directive if you want to add or remove HTML elements from the DOM based on the data in the model. Here is an example:

Shown when switch is 1 Shown when switch is 2 Shown when switch is anything else than 1 and 2 angular.module ("myapp", []) .controller ("MyController", function ($scope) {$scope.myData = {}; $scope.myData.switch = 3;})

This example contains an element whose div has a ng-switch attribute and an on attribute. This on property indicates which data in the model to open.

Inside the div element are three nested div elements. The first two nested div elements contain a ng-switch-when attribute. The value of this attribute tells on what the model data div referenced in the parent attribute should have so that the nested div is visible. In this example, the first nested div is visible when myData.switch is 1 and the second nested div is visible when myData.switch is 2.

The third nested div has a ng-switch-default attribute. If no other ng-switch-when instructions match, the div withng-switch-default property is displayed.

In the above example, the controller function sets myData.switch to 3. This means that the ng-switch-default property of the nested div will be displayed. The other two nested div elements will be completely removed from the DOM.

Ng-if instruction

The ng-if instruction can include / remove HTML elements from the DOM, just like the ng-switch instruction, but it has a simple syntax. Here is an example:

Ng-if Show it angular.module ("myapp", []) .controller ("MyController", function ($scope) {$scope.myData = {}; $scope.myData.showIt = true;})

The main difference between ng-if and ng-show+ ng-hide is that ng-if completely removes the HTML element from the DOM, while ng-show+ ng-hide simply applies the CSS attribute display: none; to the element.

Ng-include instruction

This ng-include directive can be used to include HTML fragments from other files in the HTML template of the view. Here is an example:

T this example contains the file angular-included-fragment.html into the HTML template of div that has the ng-include attribute. Notice how the file name is referenced (single quotation marks).

You can include HTML fragments based on your criteria. For example, you can choose between two files, as follows:

Angular.module ("myapp", []) .controller ("MyController", function ($scope) {$scope.myData = {}; $scope.myData.showIt = true;})

This example will include fragment-1.htmlifmyData.showIt as true and fragment-2.htmlifmyData.showIt as false.

Ng-repeat instruction

This ng-repeat directive is used to iterate over a set of projects and generate HTML from them. After the initial build, ng-repeat monitors changes to the project used to build the HTML. If the project changes, the ng-repeat directive may update the HTML accordingly. This includes reordering and deleting DOM nodes.

This is a simple example of ng-repeat:

{{theItem.text}} angular.module ("myapp", []) .controller ("MyController", function ($scope) {$scope.myData = {}; $scope.myData.items = [{text: "one"}, {text: "two"}, {text: "three"}];})

This example creates an element myData.items for each project of the li in the array.

You can also iterate over the collection returned from the function call. Here is an example:

{{theItem.text}} angular.module ("myapp", []) .controller ("MyController", function ($scope) {$scope.myData = {}; $scope.myData.items = [{text: "one"}, {text: "two"}, {text: "three"}]; $scope.myData.getItems = function () {return this.items;};})

You can iterate over the properties of the JavaScript object using a slightly different syntax:

{{name}} = {{value}} angular.module ("myapp", []) .controller ("MyController", function ($scope) {$scope.myData = {}; $scope.myData.myObject = {var1: "val1", var2: "val3", var3: "val3"};})

Note the ng-repeat of the (name, value) part of the instruction. This notifies AngularJS of the properties of the iteration object. The name of the property to which the name parameter will be bound and the property value to which the value parameter will be bound. The name and value parameters can be output to the HTML template, just like any other JavaScript variable or object property, which you can see from the HTML template above.

Special ng-repeat variable

The ng-repeat directive defines a special set of variables that you can use when iterating over the collection. These variables are:

$index

$first

$in

$last

The $index variable contains the index of the element being iterated.

And $last contains a Boolean value of the first, middle, or last element in the collection depending on whether the current project is iterating over the collection. If a project is neither the first nor the last, it is the "middle". You can use these variables, for example, to generate different HTML ng-show/ ng-hide,ng-switch, ng-if, and ng-include instructions as described earlier.

Repeat multiple elements

So far, you have only seen how to use ng-repeat. If you want to repeat multiple HTML elements, you must nest them within the container element and make the container element have the ng-repeat element, as shown below:

{{name}} {{value}}

However, it may not always be possible to wrap the element to be repeated in the root element. So AngularJS has ng-repeat-start and ng-repeat-end instructions to mark the beginning and end of repeating elements. Here is an example:

{{name}} {{value}}

This example repeats these two elements myData.myObject for each attribute of li in.

Filter

Some of the instructions described above support filtering. This section explains how filtering works.

The ng-repeat directive can accept such filters:

Note | filter: the part declared above itemFilter. That part is the filter definition. The | filter: part tells AngularJS to apply the filter to the myData.items array. The itemFilter is the name of the filter function. This function must exist on the $scope object and must return true or false. If the filter function returns true, the ng-repeat instruction uses the elements in the array. If the filter function returns false, the element is ignored. Here is an example:

Angular.module ("myapp", []) .controller ("MyController", function ($scope) {$scope.myData = {}; $scope.myData.items = [{text: "one"}, {text: "two"}, {text: "three"}, {text: "four"}]; $scope.itemFilter = function (item) {if (item.text = = "two") return false; return true })

Format filter

AngularJS comes with a set of built-in format filters that can be used with interpolation instructions and ng-bind. The following is a list of format filters:

The filter states that date formats variables as dates currency formats variables as numbers with currency symbols number formats variables into numeric lowercase converts variables to lowercase uppercase converts variables to uppercase json converts variables to JSON strings

This is an example of a date filter:

{{myData.theDate | date: 'dd-MM-yyyy'}}

This example shows a filter where date can format a JavaScript date object based on the date format pattern given after the | date: section. It is a property that myData.theDate will format as a date. Therefore, it must be a JavaScript date object.

This is an example of a digital filter:

{{myData.theNumber | number: 2}}

This example formats the myData.theNumber variable as a number with 2 decimal places.

Here is an example of a lowercase and uppercase filter:

{{myData.mixedCaseText | lowercase}} {{myData.mixedCaseText | uppercase}}

Array filter

AngularJS also contains a set of array filters that filter or transform arrays. These filters are:

Array filter:

The filter states that limitTo limits the array to a given size, starting with an index in the array. The limitTo filter also applies to strings. Filter universal filter. OrderBy sorts the array according to the conditions provided.

Here is an example of limitTo:

{{myData.theText | limitTo: 3}}

This limits the $scope myData.theText variable to three characters in length. If you apply this filter to an array, the array is limited to 3 elements.

The filter filter is a special filter that can do many different things. In its simplest form, it simply calls a function on the $scope object. This function must return trueor false. If the filter accepts the value passed to it, it returns True. If the filter cannot accept the value, it returns False. If the filter cannot accept the value, the value is not included in the array generated by the filter. Here is an example:

{{item.text}}: {{$first}}, {{$middle}}, {{$last}} angular.module ("myapp", []) .controller ("MyController", function ($scope) {$scope.myData = {}) $scope.myData.items = [{text: "one"}, {text: "two"}, {text: "three"}, {text: "four"}]; $scope.filterArray = function (item) {if (item.text = = "two") return false; return true;}})

This example calls filterArray () to filter out the function two for items with an attribute of text value.

Here is an example of orderBy:

{{item.text}}: {{$first}}, {{$middle}}, {{$last}} angular.module ("myapp", []) .controller ("MyController", function ($scope) {$scope.myData = {}) $scope.myData.items = [{text: "one"}, {text: "two"}, {text: "three"}, {text: "four"}]; $scope.sortField = "text"; $scope.reverse = true;})

The orderBy filter can accept a $scope variable as a parameter. In this example, the variable is named sortField. The value of this variable is the property name of the sorted data object and is used to sort the data object. In this example, the sortField property is set to text, which means that the text property of the data object is used to sort the data object.

The orderBy filter can also take the second $scope variable as a parameter. In this example, the variable is named reverse. The value of this variable determines whether the data objects are sorted in natural order or in natural order. In this case, the reverse variable is set to true, which means that the data objects will be sorted in reverse order.

Link filter

You can link filters by simply placing more filters one after another in the filters section. When you link a filter, the output of one filter is used as input to the next filter in the chain. Here is an example:

{{myData.theText | limitTo: 5 | uppercase}}

In this example, myData.theText first uses a limitTo filter to limit the string to 5 characters, and then uses the filter to convert 5 characters to uppercase uppercase.

Assign filter output to variables

You can assign the output of the filter to a temporary variable, which you can then reference later in the view. Here is an example:

{item.text}}: {{$first}}, {{$middle}}, {{$last}} {{filteredItems.length}}

This example assigns the filtered output to the filteredItems variable. The example then {{}} references this variable within the instruction under the ol element.

Implement a custom filter

If the AngularJS filter doesn't suit your needs, you can implement your own filter. Here is an example:

Filtered: {{myData.text | myFilter}} var module = angular.module ("myapp", []); module.filter ('myFilter', function () {return function (stringValue) {return stringValue.substring (0Jing 3);};})

This example registers a filter with AngularJS that can filter strings. The filter returns the first three characters of the string. The filter registers myFilter as name. As you can see at the beginning of the filter, you must use this name when referencing the filter.

If your filter requires more input parameters, add more parameters to the filter function and add parameters when the filter name and: reference it. Here is an example:

Filtered: {{myData.text | myFilter: 2:5} var module = angular.module ("myapp", []); module.filter ('myFilter', function () {return function (stringValue, startIndex, endIndex) {return stringValue.substring (parseInt (startIndex), parseInt (endIndex));};})

Notice that the filter reference (| myfilter:2:5) now has two values after the filter name, each separated by a colon. These two values are passed to the filter as parameters. Also notice how the filter function now accepts two extra arguments called startIndex and endIndex. These two parameters are used to determine which part of the string is returned from the filter as a substring.

At this point, the study on "introduction of views and instructions in Angularjs" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.