最近開發微信服務號 遇到
客戶管理-按拼音檢索-左滑刪除-並支援修改，
先在前臺寫了按abcd分組排序的方法，
然後在伺服器端處理 漢字轉拼音 還是挺方便的。

最終效果如圖，類似通訊錄

資料庫裡存了一個轉化來的”pinyin”欄位：

後端實現漢字轉拼音

var pinyin = require("pinyin");//引入模組

app.post('/api/users', function(req, res) {
    var name = req.body.name; //前臺輸入的angualr {{ name }}
    name = pinyin(name); //呼叫方法
 

    ……
}

前端獲取資料後abcd分組排序

function sortAbc(arr){
        const letter=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"]
        let data = [];
        const div = document.getElementById("div");
        let Html="";
        for (let i = 0; i < letter.length; i++) {
            data[i]=[];
            data[i][0
 
]=letter[i];
            data[i][1]=[];
            for(let j=0;j<arr.length;j++){  
                if(arr[j].name.substring(0,1) == letter[i][0]){
                    data[i][1].push(arr[j].name);   
                }                       
            }       
        }

        //迴圈刪除重複元素
        let
 
 result = data;  
        for (let i = data.length - 1; i >= 0; i--) {
            if(result[i][1].length==0){
                result.splice(i, 1);            
                //console.log(i)
            }

        }
        console.log(result)
    }

    sortAbc(myArr)//呼叫

angular多維陣列巢狀(在strackoverflow上看到的demo)

<div ng-app>
    <div ng-controller="test">
        <div ng-repeat="links in slides">
            <hr/>
            <div ng-repeat="link in links track by $index">
                {{link}}
            </div>
        </div>
    </div>
</div>

function test($scope) {
    $scope.slides = [
        [ 1, 1, 1 ],
        [ 4, 5, 6 ],
    ];
}

有關拼音的修改完整如下:

//public/list.html
<div class="contain" style="background:#f0f0f0">        
    <div class="all">
        <ul ng-repeat="names in slides" class="ul" >
            <span>{{ names[0] }}</span>
            <li ng-repeat="name in names[1] track by $index" class="li">
                {{ names[1][$index] }}

                <a ng-click="deleteTodo(names[2][$index])">刪除</a>  |
                <a ng-href="#/edit/{{ names[2][$index] }}/{{ names[3][$index] }}">編輯客戶</a>
            </li>

        </ul>
        <a ng-href="#/add" class="addbtn">+</a>
    </div>
</div>

//public/app.js
var app = angular.module('App', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'list.html',
            controller: 'listController'
        })
        .when('/edit/:id/:_id', {
            templateUrl: 'edit.html',
            controller: 'editController'
        })
        .when('/add', {
            templateUrl: 'add.html',
            controller: 'addController'
        })
});


//list.html
function listController($scope, $http) {
    // read
    $http.get('/api/todos')
        .success(function(data) {
            const letter=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"]
            let names = [];
            const div = document.getElementById("div");
            let Html="";
            for (let i = 0; i < letter.length; i++) {
                names[i]=[];
                names[i][0]=letter[i];
                names[i][1]=[];
                names[i][2]=[];
                names[i][3]=[];
                for(let j=0;j<data.length;j++){ 
                    if(data[j].pinyin.substring(0,1) == letter[i]){
                        names[i][1].push(data[j].text); 
                        names[i][2].push(data[j]._id);  
                        names[i][3].push(data[j].index);    

                    }

                }

            }           
            $scope.slides = names;
            console.log(names)
            console.log($scope.slides)

        })
        .error(function(data) {
            console.log('Error: ' + data);
        });


    // delete
    $scope.deleteTodo = function(id) {
        $http.delete('/api/todos/' + id)
            .success(function(data) {
                const letter=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"]
            let names = [];
            const div = document.getElementById("div");
            let Html="";
            for (let i = 0; i < letter.length; i++) {
                names[i]=[];
                names[i][0]=letter[i];
                names[i][1]=[];
                names[i][2]=[];
                names[i][3]=[];
                for(let j=0;j<data.length;j++){ 
                    if(data[j].pinyin.substring(0,1) == letter[i]){
                        names[i][1].push(data[j].text); 
                        names[i][2].push(data[j]._id);  
                        names[i][3].push(data[j].index);    

                    }

                }

            }

            $scope.slides = names;
            console.log(names)
            console.log($scope.slides)
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };



}


//edit.html
function editController($scope, $http ,$routeParams) {
    var index = $routeParams._id;  

    // read
    $http.get('/api/todos')
        .success(function(data) {
            $scope.todo = data[index]; 
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });

    // updata
    $scope.updateTodo = function() {    
        var id =  $routeParams.id;
        if(!$scope.todo.text){
            alert("請輸入活動名稱後再儲存")
            return false;
        }

        $http.post('/api/editit/' + id, $scope.todo)
            .success(function(data) {       
                $scope.todos = data;
                console.log(data);
                setTimeout(function(){
                    window.location.href = '#/';
                },500);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

};



//add.html
function addController($scope, $http) {

    $http.get('/api/todos')
        .success(function(data) {
            $scope.num= data.length;
        })

    $scope.createTodo = function() {
        if(!$scope.todo.text){
            alert("請輸入活動名稱後再儲存")
            return false;
        }


        var index=$scope.num;  
        $http.post('/api/todos/'+index, $scope.todo)
            .success(function(data) {
                setTimeout(function(){
                    window.location.href = '#/';
                },500);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };
};

//route/index.js
var Todo = require('./todo');
var pinyin = require("pinyin");

module.exports = function(app) {
    //查
    app.get('/api/todos', function(req, res) {      
        Todo.find(function(err, todos) {
            if (err)
                res.send(err)
            res.json(todos); 
        });
    });

    //增
    app.post('/api/todos/:index', function(req, res) {
        var myDate = new Date();
        var addDate = myDate.toLocaleDateString()
        var addHour = myDate.getHours(); 
        var addMinutes = myDate.getMinutes(); 
        if(addMinutes<10){      
            addMinutes="0" + addMinutes;
        }

        var str = addDate+" "+addHour+":"+addMinutes;
        var index= req.params.index;
        var text =  req.body.text;
        text = pinyin(text);
        console.log(text);

        Todo.create({
            text : req.body.text,
            pinyin :text, 
            date : str,
            index : index
        }, function(err, todo) {
            if (err)
                res.send(err);

            Todo.find(function(err, todos) {
                if (err)
                    res.send(err)
                res.json(todos);
            });
        });

    });

    //刪
    app.delete('/api/todos/:todo_id', function(req, res) {
        Todo.remove({
            _id : req.params.todo_id
        }, function(err, todo) {
            if (err)
                res.send(err);

            Todo.find(function(err, todos) {
                if (err)
                    res.send(err)
                res.json(todos);
            });
        });
    });

    //改
    app.post('/api/editit/:todo_id', function(req, res) {
        var id = req.params.todo_id;
        var text = req.body.text;
        console.log(text);              
        var myDate = new Date();
        var addDate = myDate.toLocaleDateString()
        var addHour = myDate.getHours(); 
        var addMinutes = myDate.getMinutes(); 
        if(addMinutes<10){      
            addMinutes="0" + addMinutes;
        }
        var textpy = pinyin(text);
        var newstr = addDate+" "+addHour+":"+addMinutes;    
        var updatestr = {'text': text,'date': newstr,"pinyin":textpy};



        Todo.findByIdAndUpdate(id, updatestr, function(err, todo) {
            if (err)
                res.send(err);

            Todo.find(function(err, todos) {
                if (err)
                    res.send(err)
                res.json(todos);
            });
        });
    });



    app.get('*', function(req, res) {
        res.sendfile('./public/index.html');
    });
};