0

我在网上得到了这些代码，下面是所有者所说的代码应该达到的目标。

  1. 用户可以添加新联系人（姓名、电子邮件地址和电话号码）

  2. 应显示联系人列表

  3. 用户可以从联系人列表中删除任何联系人

  4. 用户可以编辑联系人列表中的任何联系人

但是，当我尝试时，联系人列表中有一个默认数据，如果我想向联系人列表添加/保存其他数据，它只会在我编辑其中一个数据后将数据保存在联系人列表中已经在联系人列表中。 在此处输入图像描述

以下是代码： 1. HTML：

<ion-view view-title="Dashboard">
<ion-content class="padding">
  <div>
<form>
<label>Name</label> 
    <input type="text" name="name" ng-model="newcontact.name"/>
<label>Email</label> 
    <input type="text" name="email" ng-model="newcontact.email"/>
<label>Phone</label> 
    <input type="text" name="phone" ng-model="newcontact.phone"/>
    <br/>
    <input type="hidden" ng-model="newcontact.id" />
 <input type="button" value="Save" ng-click="saveContact()" />
 </form>
 <table border='1',cellpadding='10',cellspacing ='0', width ='600'>
 <tr>
 <td Align = 'center'>Name</td>
 <td Align = 'center'>Email</td>
 <td Align = 'center'>Phone</td>
 <td Align = 'center'>Action</td>
 </tr>


 <tr ng-repeat="contact in contacts">
<td Align = 'center'>{{ contact.name }}</td>
<td Align = 'center'>{{ contact.email }}</td>
<td Align = 'center'>{{ contact.phone }}</td>
<td Align = 'center'>
    <a  href="#" ng-click="edit(contact.id)">edit</a> | 
    <a href="#" ng-click="delete(contact.id)">delete</a>
  </td>
 </tr>

</table>    
</div>

</ion-content>
</ion-view>

2.JS：（控制器）

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope, ContactService) {
 $scope.contacts = ContactService.list();

 $scope.saveContact = function () {
    ContactService.save($scope.newcontact);
    $scope.newcontact = {};
 }


 $scope.delete = function (id) {

    ContactService.delete(id);
    if ($scope.newcontact.id == id) $scope.newcontact = {};
 }


 $scope.edit = function (id) {
    $scope.newcontact = angular.copy(ContactService.get(id));
 }

 })

（服务）

angular.module('starter.services', [])

.service('ContactService',function() {
var uid = 1;

var contacts = [{
    id: 0,
    'name': 'Viral',
        'email': 'hello@gmail.com',
        'phone': '123-2343-44'
}];

//save method create a new contact if not already exists
//else update the existing object
this.save = function (contact) {
    if (contact.id == null) {
        //if this is new contact, add it in contacts array
        contact.id = uid++;
        contacts.push(contact);
    } else {
        //for existing contact, find this contact using id
        //and update it.
        for (i in contacts) {
            if (contacts[i].id == contact.id) {
                contacts[i] = contact;
            }
        }
    }

}

//simply search contacts list for given id
//and returns the contact object if found
this.get = function (id) {
    for (i in contacts) {
        if (contacts[i].id == id) {
            return contacts[i];
        }
    }

}

//iterate through contacts list and delete 
//contact if found
this.delete = function (id) {
    for (i in contacts) {
        if (contacts[i].id == id) {
            contacts.splice(i, 1);
        }
    }
}

//simply returns the contacts list
this.list = function () {
    return contacts;
}
});

代码归功于：https ://viralpatel.net/blogs/angularjs-service-factory-tutorial/

4

0 回答 0