AngularJS’s example details

Post a few examples of the filter used.

1. First, create a table

   


Dedicated time Description {{g.name}} {{g.price}} {{g.intime}} {{g.desc}} Plus the style, showing as shown in Figure
VAR APP = Angular.Module ('App', []); App.Controller ('TableFilter', Function ($ Scope) { $ Scope.goods = [{Name: "HTML5", Price: 20, Intime: 1488785356895, DESC: "HTML5 is the latest revision of HTML, and October 2014 is formulated by the World Wide Web Alliance (W3C)."}, / / Time seconds by new Date (). GetTime (); get {name: "JavaScript", Price: 30, Intime: 1488685355895, DESC: "JavaScript A direct translational scripting language is a dynamic type, weak type, Based on prototype language, built-in support type. "}, {Name:" CSS3 ", Price: 25, Intime: 1468785355895, DESC:" CSSStamped style sheet. "}, {name:" Angularjs ", Price: 50, Intime: 1482785355895, Desc:" AngularJS is an excellent front-end JS framework for Google's multi-product. . "}];}
2. See the price time to display weird, good, modify the table.
{{g.Name}}
{{g.price | currency}}
{g.intime | DATE: ‘YYYY-MM-DD’}}

{g.desc} }

AngularJS的Filter的示例详解

Re-run

3. This is true that it is not an eye. But The description is too long, can not exceed a certain number of words, it will not be displayed, with … End?
  , add the filter in the form, it is called the descfilter. Word number display. Note Forgot '|' filter symbols.    {g.desc | Descfilter: 10}}       and then write method  

// in JS, filter the number of words in the DESC, and some of the few words are omitted Display app.filter (‘descfilter’, function () {Return Function (CoNTENT, NUM) {// Pass two parameters, a corresponding content, a corresponding length IF (content.length> Num) {content = content.substring (0, num) + “…”;} return content;} });

AngularJS的Filter的示例详解 Operation to see

is OK. Great.

4. Is the search box useless. Don’t forget, we have ng-model = “key”,
, modify TR. Plus Filter Condition     
. Save operation, try in the search content

. So magical, so powerful filter.
 Can you sort by price? sure. And but not only sequencing is also desirable.   

AngularJS的Filter的示例详解

. Change JS

$ scope.isasc = false; // Defines the ISASC variable to false, default ascending; $ scope.sort = function () {$ scope .issaasc; // lifting switch}
    

4. Even

AngularJS的Filter的示例详解

Operate again. Ascending order can be. Datual!

       

The above is the example of the example of the Filter of AngularJS introduced to you, I hope to help everyone. If you have any questions, please leave a message, Xiaobu Reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment