Question

我正在尝试显示控制器中的对象列表，然后尝试编辑它们。

我将名为editContact的数据绑定到输入文本框中的值。我想在范围中设置变量ii，然后在完成编辑时，将联系人[ii]替换为临时对象editContact。但是ii没有被认可。我可以设置像ii这样的变量吗？

    <!doctype html>
<html ng-app>
<head>
<style>
</style>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>

</head>
<body>
<div ng-controller="contactsController">
<label>Name</label>
    <input ng-model="name" type="text" placeholder="Name">
<label>email</label>
<input ng-model="email" type="text" placeholder="Email">
<button ng-click="addContact()">Add contact</button>
<div>{{contactsController.name}}</div>
<div>
    <ul>

        <li ng-repeat="contact in contacts">
            <div>{{contact.name}}</div>
            <div>{{contact.email}}</div>
            <div><button ng-click="deleteContact($index)">delete</button></div>
            <div><button ng-click="editContact($index)">Edit</button></div>

        </li>
    </ul>
    <input type="text"  value="{{editContact.name}}"/>
    <input type="text"  value="{{editContact.email}}"/>
    <button ng-click="changeValue(ii)">Edit</button>
</div>
</div>
<script>
// Your code goes here.

    // $( document ).ready(function() {
    //  alert('jQuery asdfas!');
// Your code here.
// });
function contactsController($scope){
    $scope.contacts=[{name:'asdf',email:'asdf'},
    {name:'yweuir',email:'xcvzx'}
    ];
    contactsController.prototype.addContact =function(){
        console.log(this.name);
        console.log(this.email);
        this.contacts.push({name:this.name,email:this.email});
    }

    $scope.changeValue=function(){
        $scope.contacts[$scope.ii]=$scope.editContact;
    }

    $scope.editContact=function(i){
        $scope.editContact=$scope.contacts[i]
        $scope.ii=i;
    }
}
</script>

</body>
</html>

Answer 1

首先，在DOM中，始终使用ngModel绑定输入框的属性。例如：

<input type="text" ng-model="editContact.name"/>

其次，永远不要使用$index作为查找控制器内容的参考点。你应该使用对象本身。例如：

<li ng-repeat="contact in contacts">
  <button ng-click="editSomeContact(contact)"></button>
</li>

然后你的JavaScript应该是这样的：

$scope.addContact = function() {
  $scope.contacts.push({name: '', email: ''});
};

$scope.editSomeContact = function(contact) {
  $scope.editContact = contact;
};

$scope.deleteContact = function(contact) {
  var index = $scope.contacts.indexOf(contact);
  if(index > -1) {
    $scope.contacts.splice(index, 1);
  }
  if($scope.editContact === contact){
     $scope.editContact = null;
  }
};

此时，您不需要changeValue函数，因为您会看到列表中的联系人将使用已编辑的字段进行更新，因为这两个值都是动态绑定的。

编辑ng-controller中的功能

1 个答案: