AngularJs實現autoComplate

最近在搞AngularJs,需要實現一個自動檢索的效果。

因初次接觸AngularJs大費周折，百度了N多種方法.代碼從幾十行到幾百行的都有，雜亂不堪。

最后發現其實簡簡單單的一句代碼就可以很棒的實現這個效果，為了避免有太多的人跟我入一樣的坑。分享在這里，哪里有什么不好的，歡迎大家留言。

代碼如下

<script src="js/angular.js"></script>
<div ng-app="test">
    <div ng-controller="testController">
        <div class="user_inleft">
            <input type="text" ng-model="searchOption" />
            <ul>
                <li ng-repeat="u in searchuserData|filter:searchOption |orderBy :'userName'">
                    <span id="{{u.id}}">{{u.userName}}</span>
                </li>
            </ul>
        </div>
        <div style="clear:both"></div>
    </div>
</div>

Js代碼

<script>
    var test = angular.module("test", []);
    test.controller("testController", function ($scope, $http) {
        $scope.searchuserData = [{ "id": "2", "userName": "趙云", "accountName": "yun.zhao", "guid": "", "description": "常山趙子龍", "createTime": "20151230152059000", "phone": "186********", "deleteFlag": 0, "email": "yun.zhao@***.com", "address": "蜀國" }, { "id": "3", "userName": "劉備", "accountName": "admin", "guid": "e10adc3949ba59abbe56e057f20f883e", "description": "蜀國的boss，耳垂到肩，手臂到膝", "createTime": "20151230152101000", "phone": "1554*****3543", "deleteFlag": 0, "email": "bei.liu@***.com", "address": "蜀國" }, { "id": "4028c78151f5f4900151f5ff08d10000", "userName": "曹操", "accountName": "cao.cao", "guid": "e10adc3949ba59abbe56e057f20f883e", "description": "梟雄", "createTime": "20151231112207000", "phone": "1554*****3543", "deleteFlag": 0, "email": "cao.cao@***.com", "address": "魏國" }, { "id": "fbb956295211161101521fc2f1f70000", "userName": "馬超", "accountName": "chao.ma", "guid": "", "description": "蜀國大將", "createTime": "20160108134335000", "phone": "********9867", "deleteFlag": 0, "email": "chao.ma@***..com", "address": "蜀國" }, { "id": "fbb956295211161101521fc32c760001", "userName": "--------", "accountName": "--------", "guid": "eccbc87e4b5ce2fe28308fd9f2a7baf3", "description": "--------", "createTime": "20160108134350000", "phone": "--------", "deleteFlag": 1, "email": "--------", "address": "--------" }, { "id": "fbb95629521ff65e01522eb8696f0000", "userName": "漢漢", "accountName": "xinhan.sun", "guid": "698d51a19d8a121ce581499d7b701668", "description": "我只是來湊個數", "createTime": "20160111112623000", "phone": "********9634", "deleteFlag": 0, "email": "hanhan@***.com", "address": "***" }, { "id": "fbb95629522ecaa301522f037e5d0000", "userName": "ss", "accountName": "ss", "guid": "3691308f2a4c2f6983f2880d32e29c84", "description": "test data", "createTime": "20160111124824000", "phone": "ss23", "deleteFlag": 1, "email": "ss", "address": "ss23" }, { "id": "fbb95629522ecaa301522f1820dd0007", "userName": "qq", "accountName": "qq", "guid": "5d87197c7c26857efb2a726f19db772c", "description": "i want to delete this item,but it not work!~", "createTime": "20160111131056000", "phone": "aa", "deleteFlag": 1, "email": "aa", "address": "aa123" }, { "id": "fbb95629522ecaa3015234d67c88002a", "userName": "黃忠", "accountName": "zhong.huang", "guid": "8262e943d68cbab9f4d45795d283e03b", "description": "蜀國大將", "createTime": "20160112155657000", "phone": "186********", "deleteFlag": 0, "email": "zhong.huang@***.com", "address": "蜀國" }, { "id": "fbb95629522ecaa3015234d8fe4f002b", "userName": "呂布", "accountName": "bu.lv", "guid": "0bb8d5de5a09ddce764a15aee2b087e3", "description": "人中呂布，馬中赤兔，最后被曹總給斬了", "createTime": "20160112155942000", "phone": "186********", "deleteFlag": 0, "email": "bu.lv@***.com", "address": "群雄" }, { "id": "fbb95629522ecaa301523f121823002c", "userName": "孫悟空", "accountName": "sunwukong", "guid": "ae38313c86ead9acc6471f85578483a6", "description": "齊天大圣", "createTime": "20160114153816000", "phone": "********9634", "deleteFlag": 0, "email": "suwukong@***.com", "address": "天庭5號花果山水簾洞" }];
    })
</script>

版本：AngularJS v1.4.2

時間緊迫沒詳細寫，但是復制粘貼，自己在搞個js文件，直接就能work了。老婆還等回家吃飯呢。就醬.