Angular中的可编辑列表/表

Question

我已经在很长一段时间内搜索Angular中可编辑表/列表的工作示例或教程。我最近关注的是here上的示例，但它似乎并不完整。所以我在这个例子之后得到的是：

HTML：

<h1>User Liste</h1>
<table class="table table-striped table-bordered">
    <thead>
    <tr>
        <th>Nr.</th>
        <th>Name</th>
        <th>Age</th>
        <th>Action</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="user in $ctrl.userlist track by $index">
        <td>
            {{$index + 1}}
        </td>
        <td>
            {{user.name}}
        </td>
        <td>
            {{user.age}}
        </td>
        <td>
            <div class="btn-group">
                <button type="button" class="btn btn-default btn" ng-click="editRecord($index);"><i class="glyphicon glyphicon-pencil"></i></button>
                <button type="button" class="btn btn-default btn" ng-click="deleteRecord($index);"><i class="glyphicon glyphicon-trash"></i></button>
            </div>
        </td>
    </tr>
    </tbody>
</table>
<div class="">
    <form class="form-horizontal">
        <div class="form-group col-sm-4">
            <label for="name" class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" placeholder="Name" ng-model="userObject.name"/>
            </div>
        </div>
        <div class="form-group col-sm-4">
            <label for="age" class="col-sm-2 control-label">Age</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="age" placeholder="Age" ng-model="userObject.age"/>
            </div>
        </div>
        <input type="hidden" ng-model="this.objectIndex" class="ng-valid">
        <div class="btn-group col-sm-2">
            <button type="button" class="btn btn-primary btn" ng-click="save()"><i class="glyphicon glyphicon glyphicon-ok-circle"></i> Save</button>
        </div>
    </form>
</div>

JS：

class UserlistController {
    constructor(){
        this.userlist = [
            {
                name: 'Parvez Alam',
                age: '28'
            },

            {
                name: 'Sameer',
                age: '13'
            },
            {
                name: 'Rakesh',
                age: '55'
            },
            {
                name: 'Ramesh',
                age: '44'
            },
            {
                name: 'Aman',
                age: '34'
            },
            {
                name: 'John',
                age: '23'
            }
        ];
    }

    editRecord(id){
        this.objectIndex=id;
        this.userObject = angular.copy(this.userlist[id]);
        console.log(this.objectIndex);
    }

    saveRecord(){
        console.log(this.objectIndex);
        if(this.userlist[this.objectIndex] == null){
            //new record
            this.userlist.push(this.userObject);
        }else{
            //updating existing record
            this.userlist[this.objectIndex] = this.userObject;
        }
        this.userObject={};
        this.objectIndex = '';
    }

    deleteRecord(id){
        for(i in this.userlist){
            if(this.userlist[i].id == id){
                this.userlist.splice(i,1);
                this.newcontact = {};
            }
        }
    }

}

export default UserlistController;

但是没有任何东西可以工作，既没有编辑，也没有删除，也没有添加新条目，当然我发现有一些东西缺失但我不知道究竟是什么或怎么做（因为我和＃ 39;对角度来说很新鲜。有人可以帮我解决我尝试的事情（来自上面提到的教程）或者有更好的教程/示例吗？

PS：我不想使用完成的插件或lib。