javascript - Issue with angular auto populating the create form when I click on the edit form -
i created simple phonebook app crud functionality in angular. having issue angular's ng-model auto populating create form when click on edit button has own form editing. how can separate 2 forms without losing functionality? picture of issue if code not readable, have linked project on 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 mainctrl" class="list"> <div class="add"> <a href="" ng-click="mainctrl.toggleform()">+ add 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 , 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 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 , 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); }; }); })();
i figured out answer installing ng-inspector browser extension.
i saw wrote 2 controllers on line:
<div ng-controller="maincontroller mainctrl"> i thought creating shortcut. changed the line to:
<div ng-controller="mainctrl"> after worked great. had change functions reference $scope instead of in controller. had change ng-models in index.html file mainctrl.name contact.name. after made these changes worked perfectly. changes can seen on github link project: contacts_angular_practice
Comments
Post a Comment