[Angular] Angular Search filter, built-in filters, ng-repeat 

<!DOCTYPE html>
<html>
    <head>
        <title>Angular Binding</title>
        <script src="angular.min.js"></script>
        <script src="main.js"></script>
    </head>
    <body>
        <div ng-app="myApp">

            <div ng-controller="FirstCtrl">
                <input type="text" ng-model="msg.message" />
                <h1>{{msg.message}}</h1>
            </div>
            
            
            <div ng-controller="SkillsCtrl">
                <!--<input type="search" ng-model="searchName" /> search string-->
                <!--<input type="search" ng-model="search.$" /> search everything in the object-->
                <input type="search"  ng-model="search.name"/>
                <table>
                    <tr ng-repeat="skill in skills.cast | filter:search"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>
　　　　　　　　　　　　<!--<tr ng-repeat="skill in skills.cast | filter:{skill:skill.nanme}"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>-->


                </table>
            </div>
        </div>    
    </body>
</html>

 

//$scope is an area which can affected
/*
function FirstCtrl($scope){
    $scope.data = {message: "Hello"};
}*/
var app = angular.module('myApp', []);
app.factory('DataFromService', function(){
    return {message: "This is from service"}
});
app.factory('Skills', function(){
    var skills = {};
    skills.cast = [
            {'name': "Hadoop", "icon": "", "level": "Learning"},
            {'name': "Angular JS", "icon": "", "level": "Good"},
            {'name': "Backbone.js", "icon": "", "level": "Good"},
            {'name': "Node.js", "icon": "", "level": "Good"},
            {'name': "Javascript", "icon": "", "level": "Good"},
            {'name': "jQuery", "icon": "", "level": "Good"},
            {'name': "PHP", "icon": "", "level": "Good"},
            {'name': "Java SE", "icon": "", "level": "Good"},
            {'name': "Android", "icon": "", "level": "Good"},
            {'name': "HTML5", "icon": "", "level": "Good"},
            {'name': "CSS3", "icon": "", "level": "Good"},
            {'name': "MySQL", "icon": "", "level": "Good"},
            {'name': "MongoDB", "icon": "", "level": "Good"},            
            {'name': "Python", "icon": "", "level": "Know"},
            {'name': "Linux", "icon": "", "level": "Know"},
            {'name': "C#", "icon": "", "level": "Know"},
            {'name': "JSP", "icon": "", "level": "Know"},
            {'name': "Servlet", "icon": "", "level": "Know"},
            {'name': "JSP", "icon": "", "level": "Know"},
            {'name': "Servlet", "icon": "", "level": "Know"}        
    ];    
    return skills;
});

app.filter('reverse', function(DataFromService){
    return function(text){
        return text.split(" ").reverse().join(" ");
    }
});

function SkillsCtrl($scope, Skills){
    $scope.skills = Skills;
}

function FirstCtrl($scope, DataFromService){
 /*DataFromService: Object {message: "This is from service", reply: "I am Zhentian"} */
    $scope.msg = DataFromService;
}

 

 

-----------------------------Built-in Filters-------------------------

<tr ng-repeat="skill in skills.cast | orderBy: 'name' | filter:search"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>
<!--<tr ng-repeat="skill in skills.cast | limitTo: 5 | orderBy: 'name'"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>-->
<!--<tr ng-repeat="skill in skills.cast | limitTo: -5"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>-->
<!--<tr ng-repeat="skill in skills.cast | limitTo: 5"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>-->
<!--<tr ng-repeat="skill in skills.cast | orderBy: '-name'"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>-->
<!--<tr ng-repeat="skill in skills.cast | filter:search"><td>{{skill.name}}</td><td>{{skill.level}}</td></tr>-->

 

posted @ 2014-08-11 18:38  Zhentiw  阅读(468)  评论(0)    收藏  举报