我在 Angular 中创建了一个具有 CRUD 功能的简单电话簿应用程序。我遇到一个问题，当我单击具有自己的编辑表单的编辑按钮时，Angular 的 ng-model 会自动填充我的创建表单。如何在不失去功能的情况下分离这两种形式？ Picture of Issue如果代码不可读，我已经在github上链接了我的项目:contacts_angular_practice
<-- index.html -->
<!DOCTYPE html>
<html lang="en" ng-app="contactsApp">
<head>
<meta charset="UTF-8">
<title>Contacts</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="controllers/main.js"></script>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Contacts</h1>
<!-- create functionality-->
<div ng-controller="mainController as mainCtrl" class="list">
<div class="add">
<a href="" ng-click="mainCtrl.toggleForm()">+ Add a New Contact</a>
<form ng-show="mainCtrl.formIsVisible" ng-submit="mainCtrl.create()">
<label>Name</label>
<input placeholder="Enter Name" class="createInput" type="text" name="name" ng-model="mainCtrl.name">
<label>Phone Number</label>
<input placeholder="Enter Phone Number" class="createInput" type="text" name="phoneNumber" ng-model="mainCtrl.phoneNumber">
<button class="new">New Contact</button>
</form>
</div>
<!-- edit, update and delete functionality -->
<div class="item" ng-repeat="contact in mainCtrl.contacts">
<!-- | orderBy:'-name': true -->
<!-- show data -->
<div ng-show=!editContact>
<label ng-show="!editContact">{{contact.name}}</label>
<label ng-show="!editContact">{{contact.phoneNumber}}
</label>
</div>
<!-- form for editing -->
<form ng-show="editContact">
<input ng-model="mainCtrl.name" class="editing-label" type="text"/>
<input ng-model="mainCtrl.phoneNumber" class="editing-label" type="text"/>
</form>
<!-- edit, save and delete buttons -->
<div class="actions">
<a href="" class="edit" ng-click="mainCtrl.edit($index); editContact = !editContact">Edit</a>
<a href="" class="save" ng-click="mainCtrl.update($index); editContact = !editContact">Save</a>
<a href="" class="delete" ng-click="mainCtrl.delete($index)">Delete</a>
</div>
</div>
</div>
</body>
</html>
<-- app.js -->
'use strict';
(function() {
var app = angular.module('contactsApp', [
'mainController'
])
})()
<-- main.js(controller) -->
(function() {
angular.module("contactsApp", [])
.controller("mainController", function() {
this.contacts = [
{"id": "0", "name":"Carson Daly", "phoneNumber":"000-000-0000"},
{"id": "1", "name":"Britney Spears", "phoneNumber":"000-000-0000"},
{"id": "2", "name":"Freddie Prince Jr", "phoneNumber":"000-000-0000"},
{"id": "3", "name":"Halle Berry", "phoneNumber":"000-000-0000"},
{"id": "4", "name":"Gary Oldman", "phoneNumber":"000-000-0000"},
{"id": "5", "name":"Aaron Carter", "phoneNumber":"000-000-0000"}
]
this.formIsVisible = false
this.toggleForm = function() {
console.log("toggleform")
if(this.formIsVisible){
this.formIsVisible = false
}
else {
this.formIsVisible = true
}
}
this.reset = function(){
this.name = ""
this.phoneNumber = ""
}
this.create = function() {
console.log("clicked")
this.contacts.unshift({
name: this.name,
phoneNumber: this.phoneNumber
});
this.reset()
};
this.edit = function(index) {
var contact = this.contacts[index];
this.name = contact.name;
this.phoneNumber = contact.phoneNumber;
};
this.update = function(index) {
var contact = this.contacts[index];
contact.name = this.name;
contact.phoneNumber = this.phoneNumber;
};
this.delete = function(index){
console.log("whats up")
console.log(index)
this.contacts.splice(index, 1);
};
});
})();
最佳答案
我通过安装 ng-Inspector 浏览器扩展找到了答案。
我立刻看到我写了两个 Controller 就行了:
<div ng-controller="mainController as mainCtrl">
我以为我正在创建一个快捷方式。我将该行更改为:
<div ng-controller="mainCtrl">
之后效果很好。我必须更改我的函数以引用 $scope 而不是 Controller 中的 this 。我还必须将 index.html 文件中的 ng-models 从 mainCtrl.name 更改为 contact.name。在我进行这些更改后，它运行得非常好。这些更改可以在我的 github 项目链接中看到:contacts_angular_practice
关于javascript - 当我单击编辑表单时， Angular 自动填充创建表单的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34833406/