Javascript AngularJs如何创建相同服务的列表

我有一个可以由用户添加的服务。它可以是一个或多个

我有一个按钮来添加服务

<button type="button" class="btn btn-success" ng-click="addService()">
    <span class=" glyphicon glyphicon-plus">
    </span>Add Service
</button>

添加服务

单击“添加服务”时，服务列表中有一个新服务

我有两个文本区域用于提供服务信息

<label for="usr">Name:</label>
<input type="text" class="form-control" id="name"></br>
<label for="usr">Service:</label>
<input type="text" class="form-control" id="service"></br>

名称：


服务：

当我点击添加服务按钮时，一个已知的服务按钮应该与此文本区域一起生成

如何生成该服务并将新服务添加到服务列表中

$scope.services = [];
$scope.addService = function() {
    var newService = {
        name : 'a name',
        service : 'a service'
    };
    $scope.services.push(newService);
}

还有HTML

<div ng-repeat="service in services"><label for="usr">Name:</label>
<input type="text" class="form-control" value="{service.name}"></br>
<label for="usr">Service:</label>
<input type="text" class="form-control" value="{service.service}"></br></div>

名称：


服务：

您将使用

ng model

，它将负责将字段双向绑定到范围对象

<label for="usr">Name:</label>
<input ng-model="newService.name"></br>
<label for="usr">Service:</label>
<input ng-model="newService.service"></br>

---

如果使用表单，则可以使用角度验证，并将表单上的

ng单击

移动到

ng提交

<代码>ng提交如果验证失败将不会触发

粘贴一些控制器代码。如何跟踪为哪些输入元素创建的服务？

$scope.addService = function() {
     // copy and push newService object to array
    $scope.services.push(angular.copy($scope.newService));
    // reset newService object to clear fields
    $scope.newService = {};   

}