Angular JS Learning Summary

Here is an example of a dynamic load table for angular JS implementation, based on the contents of the input box and search

<script>
    var Mainapp = angular.module ("Mainapp", []);
    Mainapp.controller ("Mycontroller", function ($scope) {

       $scope. childrenarry=[
           {name: "Alice", Age:20},
           {Name: "Liulin", age:20},
           {Name: "John", Age:23},
           {name: "Mary", Age:18},
           {Name: "Blue", age:25}
       ];


    });
</script>

<div ng-controller= "Mycontroller" >
    <input type= "text" ng-model= "SearchText"/>
    <select name= "" id= "" ng-model= "select" >
        <option value= "Name" > name (Ascending) </option>
        <option value= "-name" > Name (Descending) </option>
        <option value= "Age" > Ages (Ascending) </option>
        <option  value= "-age" > Age (Descending) </option>
        <!--<option ng-click= "select: '-age '" value= "> Age (Descending) </option>-->
    </select>
    <table>
        <tr>
            <th> name </th>
            <th> Age </th>
        </tr>
        <tr ng-repeat= "ary in Childrenarry | Application of Filter:searchtext |orderby:select ">//filter
            <td>{{ary.name}}</td>
            <td>{{ary.age}}</td>
        </tr>
    </table>
</div>

Ng-controller

To explicitly create a $scope object, we are going to put a controller object on the DOM element, using the Ng-controller Directive attribute:

<div ng-controller= "Mycontroller" > {{person.name}} </div>

The Ng-controller directive creates a new $scope object for the DOM element in which it is located, and includes the $scope object in the $scope object of the outer DOM element. In the above example, the $scope object of this outer DOM element is the $rootscope object. This scope chain is like this:

All scopes follow the prototype inheritance (Prototypal inheritance), which means that they all have access to the parent scope. For any property and method, if the ANGULARJS is not found on the current scope, it will go to the parent scope to find, if not found on the parent scope, will continue to backtrack upward, until $rootscope. That is, if the controller is nested in multiple layers, it will go from the innermost to the outside, the scope chain is this:

The only exception: some directive attributes can optionally create an independent scope, so that the scope does not inherit its parent scope.

Scope of the $scope

Angular only div nested $scope will inherit. In general $scope will find their own, rubbing their own not only will find the restorer up until found.

$rootscope the root scope, which is global. For the parent element, if he does not find the parent element will continue to be found.

If the parent element is an object, the child element does not have an object, he inherits the parent element's object, and the child element's change affects the parent element's change, because they all point to the same object that is the same address.

Angular JS Learning Summary