Работа с формами в angularjs?

Question

zachfischer @zachfischer

Angular

Работа с формами в angularjs?

Как можно организовать удаление, редактирование и добавление данных таблицы используя Angular.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Prototype</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body ng-app="phonebook">
    <div class="container" 
        ng-controller="PhonebookController"
        ng-switch on="view">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                  <span class="input-group-addon">SEARCH</span>
                  <input type="text" class="form-control" ng-model="query">
                </div>
            </div>
        </div>
        <div ng-switch-when="list">
            <pb-person-card 
                ng-repeat="person in persons | filter:query "
                person="person"></pb-person-card>  
        </div>
        <table class="table" ng-switch-when="table">
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Company</th>
              <th>Phone</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="p in persons | filter:query">
              <td>{{$index + 1}}</td>
              <td>{{p.name}}</td>
              <td>{{p.company}}</td>
              <td>{{p.phone}}</td>
               <td><button class="btn btn-danger" ng-click="delete(p)">удалить</button></td>
            </tr>
          </tbody>
        </table>
    </div>
</body>
</html>

var app = angular.module('phonebook', []);

app.controller('PhonebookController', ['$scope',
    'DataService', function(scope, dataService){
    scope.persons = dataService.list();
    scope.view = 'table';
}]);
app.service('DataService', [function(){
    function list(){
        return [
            {
                "name":"Iron Man",
                "phone":"777-77-77",
                "company":"Stark Inc.",
                "photo":"iron-man.jpeg"
            },
            {
                "name":"Баба Яга",
                "phone":"123-00-00",
                "company":"Дремучий лес",
                "photo":"baba-yaga.jpg"
            },
            {
                "name":"Batman",
                "phone":"111-11-11",
                "company":"Wayne Inc.",
                "photo":"batman.jpg"
            },
            {
                "name":"Black Widow",
                "phone":"333-33-78",
                "company":"Avengers",
                "photo":"black-widow.jpg"
            },
            {
                "name":"Captain America",
                "phone":"555-55-55",
                "company":"Avengers",
                "photo":"captain-america.jpg"
            },
            {
                "name":"Darth Vader",
                "phone":"131-13-13",
                "company":"Dark Side Ltd.",
                "photo":"darth-vader.jpg"
            },
            {
                "name":"Hulk",
                "phone":"888-88-88",
                "company":"Avengers",
                "photo":"hulk.jpg"
            },
            {
                "name":"Joker",
                "phone":"-",
                "company":"000-00-00",
                "photo":"joker.png"
            },
            {
                "name":"Luke Skywalker",
                "phone":"999-99-99",
                "company":"The Force Ltd.",
                "photo":"luke-skywalker.jpg"
            },
            {
                "name":"Yoda",
                "phone":"900-90-90",
                "company":"The Force Ltd.",
                "photo":"yoda.jpg"
            }
        ];
    }

    return {
        list: list
    };
}]);
$scope.delete = function(p) { 
    var index = $scope.persons.indexOf(p); 
    $scope.persons.splice(index, 1); 
};