当我单击编辑表单时，角度自动填充创建表单的问题

Issue with angular auto populating the create form when I click on the edit form

本文关键字：表单 填充 创建 问题 单击 编辑      更新时间：2023-09-26

我在Angular中创建了一个具有CRUD功能的简单电话簿应用程序。我遇到了一个问题，当我单击具有自己的编辑表单进行编辑的编辑按钮时，Angular 的 ng 模型会自动填充我的创建表单。如何在不丢失功能的情况下分离这两种形式？问题图片 如果代码不可读，我已经在 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 浏览器扩展找到了答案。

我

立即看到我在线上写了两个控制器：

<div ng-controller="mainController as mainCtrl">

我以为我正在创建一个快捷方式。我将行更改为：

<div ng-controller="mainCtrl">

在那之后它工作得很好。我不得不更改我的函数以引用$scope而不是在控制器中引用这个。我还必须将索引.html文件中的 ng 模型从 mainCtrl.name 更改为 contact.name。在我进行了这些更改后，它运行良好。这些更改可以在我的 github 项目链接中看到：contacts_angular_practice

相关文章：