JS Frame--angular.js (5)

1.3 Kinds of filtration methods

1 <HTML>2   <Head>3     <MetaCharSet= ' Utf-8 '>4     <Scriptsrc= "Js/angular.js"></Script>5     <Scriptsrc= "Js/app.js"></Script>6     <Linkrel= "stylesheet"href= "Css/bootstrap.css">7   </Head>8   <BodyNg-app= "MYAPP">9     <DivNg-controller= "Myctrl">Ten  One       <H3>Filter by String</H3> A       <formclass= "Form-inline"> -         <inputNg-model= "Query"type= "text"placeholder= "Filter by name"Autofocus> -       </form> the       <ulng-repeat= "Friend in Friends | filter:query | By: ' Name '"> -         <Li>{{Friend.name}} ({{friend.age}})</Li> -       </ul> -     </Div> +  -     <DivNg-controller= "Myctrl"> +       <H3>Filter by Object</H3> A       <formclass= "Form-inline"> at         <inputNg-model= "Query"type= "text"placeholder= "Filter by name and age=20"> -       </form> -       <ulng-repeat= "Friend in Friends | filter: {name:query, Age: '"} | by: ' Name ' "> -         <Li>{{Friend.name}} ({{friend.age}})</Li> -       </ul> -     </Div> in  -     <DivNg-controller= "Myctrl"> to       <H3>Filter by predicate Function</H3> +       <ulng-repeat= "Friend in Friends | filter:filterfunction | By: ' Name '"> -         <Li>{{Friend.name}} ({{friend.age}})</Li> the       </ul> *     </Div> $   </Body>Panax Notoginseng </HTML>

1 var app = Angular.module ("MyApp", []);2 3 App.controller ("Myctrl", function ($scope) {4 $scope. Friends = [5 {name: "Peter", age:20},6 {name: "Pablo", age:55},7 {name: "Linda", age:20},8 {name: "Marta", age:37},9 {name: "Othello", age:20},Ten {name: "Markus", age:32} One   ]; A  - $scope. filterfunction = function (Element) { - return Element.name.match (/^ma/) true:false; the   }; -  -});

3 Types of filtration, the first type-

Filter by variable.

In the first filter, we used the Ng-model for input, which added filter:query to the filter condition.

At first glance there is no problem, it can also be run, but the problem is that when we enter the number, even the later age will become a search condition, if the object of the property only a few fortunately, once more up, the filter is not feasible at all.

"So we need to be more precise about filtering." 】

The result is a second filter, filtered according to the conditions provided by the object, and the filter becomes the object filter: {name:query, Age: ' 20 '}, which makes filtering easier and more accurate.

The third method of filtering is through functions.

When we make a change to the filter: Change the value to True, you will find that there is no matching value, and instead of false, all the information will appear. So, as long as we create a judgment function, this function needs to bring in the Judgment object as a parameter and return a Boolean value, then this function can be used when the filter, and, because it is a function, so the filtering mechanism can be written more complex.

JS Frame--angular.js (5)