Object not added to one $scope variable but to all others - angularjs

Everytime I want to add a form to fill out a new contact person of a customer company I call this function:
$scope.addContact = () => {
$scope.selectedCustomer.contacts.push({});
console.log(JSON.stringify($scope.selectedCustomer));
};
But I noticed there is one customer that magically loses that contact object at somepoint after the method is called and I don't know why, because in the debugger only some standard angularjs methods are executed that shouldn't play a role in this and I don't understand them.
Usually the console looks like this:
1st, 2nd and 3rd click on add contact button results in:
{"id":135,"masterData":{},"name":"Normal Test","contacts":[{}]}
{"id":135,"masterData":{},"name":"Normal Test","contacts":[{"$$hashKey":"object:2205"},{}]}
{"id":135,"masterData":{},"name":"Normal Test","contacts":[{"$$hashKey":"object:2205"},{"$$hashKey":"object:2207"},{}]}
But for one object (so far, but I think there are more) the same situation prints this:
{"id":150,"masterData":{},"name":"Test AG","contacts":[{}]}
{"id":150,"masterData":{},"name":"Test AG","contacts":[{}]}
{"id":150,"masterData":{},"name":"Test AG","contacts":[{}]}
As you see there is an empty object added but not saved, every time I click add contact again, the contacts array is empty at first.
In the mongo db those two customers look exactly the same:
What else can I analyze to find out where the problem is and what to do about it?
EDIT
By debugging I found the place where the workflow traverses a different path when it's not working:
contentscript.js, line 1114 var observerHandler = function(mutations) {... is traversed when it works, but not reached during the failing process - it is called after: return typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ? jQuery.event.dispatch.apply( elem, arguments ) : undefined; in jquery.js, line 5013.
My HTML:
<div class="form-group">
<label for="contacts" class="col-sm-3 control-label">Ansprechpartner</label>
<div class="col-sm-9">
<table id="contacts" ng-if="selectedCustomer.contacts.length"
class="table-condensed" cellpadding="10">
<tr>
<th>Name</th>
<th>Telefon</th>
<th>E-Mail</th>
</tr>
<tr ng-repeat="contact in selectedCustomer.contacts">
<td>
<a class="delete" ng-hide="readonly" ng-click="deleteContact(contact)">
<i class="fa fa-minus-circle"></i>
</a>
<input type="text" class="form-control"
ng-readonly="readonly" ng-model="contact.name"
placeholder="keine Angabe">
</td>
<td>
<input type="text" class="form-control" ng-readonly="readonly"
ng-model="contact.phone" placeholder="keine Angabe"/>
</td>
<td>
<input type="text" class="form-control" ng-hide="readonly"
ng-model="contact.email" placeholder="keine Angabe"/>
<a href="mailto:{{contact.email}}" ng-show="readonly">
<input type="text" class="form-control"
ng-readonly="readonly" ng-model="contact.email"
placeholder="keine Angabe"/>
</a>
</td>
</tr>
</table>
<div class="addContact" ng-hide="readonly">
<button class="btn btn-default btn-block btn-sm" ng-click="addContact()"
type="button">+ Ansprechpartner hinzufügen...
</button>
</div>
</div>
</div>

Related

Values not updating for dynamically added field in angular js

I have created a form where fields are added dynamically.Adding works perfectly but the problem i am facing is when i am updating it.In the form there are two textboxes , a text area and a checkbox. Checkbox is checked depending upon the condition of a database field.At the time of editing all values are getting updated but the checkbox value is always getting set to true if i also unchecked the checkbox.
Below the code i am using
The Json i am receiving
$scope.choices = {"success":"yes","msg":"","data":{"checkListValues":[{"id":"81","checklist_id":"1","number":"1","short_text":"shorttext 12","long_text":"longtext12","is_photo":"1"},{"id":"82","checklist_id":"1","number":"2","short_text":"shorttext21","long_text":"longtext22","is_photo":"1"}]}}
In the html Part
<a ng-click="addNewChoice()" class="btn btn-success ng-scope" >Add More</a>
<tr data-ng-repeat="choice in choices track by $index">
<td>
<div class="number-part">
<input type="text" ng-model="choice.number" required />
</div>
</td>
<td>
<div class="shorttext-part">
<input type="text" ng-model="choice.short_text" ng-trim="false" maxlength="40" required/>
<div class="clearfix"></div>
<span class="character-count">{{40 - choice.short_text.length}} Characters left</span>
</div>
</td>
<td>
<div class="shorttext-part">
<textarea ng-model="choice.long_text" ng-trim="false" maxlength="255" required></textarea>
<div class="clearfix"></div>
<span class="character-count">{{255 - choice.long_text.length}} Characters left</span>
</div>
</td>
<td>
<input type="checkbox" ng-checked="choice.is_photo == 1" ng-model="choice.is_photo"/>
</td>
<td>
<a ng-if="!$first" ng-click="removeChoice($index)">
<i class="fa fa-minus"></i>
</a>
</td>
And In the angular js controller
$scope.removeChoice = function(z)
{
var lastItem = $scope.choices.length-1;
$scope.choices.splice(z,1);
};
$scope.addNewChoice = function()
{
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
//console.log("=====",$scope.choices);
};
$scope.item = [];
var newItem = {};
for( var i in $scope.choices)
{
newItem= $scope.choices[i];
$scope.item.push(newItem);
}
So how to do that if a checkbox is selected at the time of editing and if i unchecked it the value should be updated in the $scope.choices.
Working for the text box and text area... problem is happening only with the checkbox
EDIT Maybe it is better that is_photo to be a boolean, instead of string:
Than you dont need to use ngChange at all, you just need ng-model and ng-checked
I left in this plunker ng-change so you can monitor the values of the checkbox models.
<input type="checkbox" ng-checked="choice.is_photo" ng-model="choice.is_photo" />

Angular JS Forms submit not sending ID

I am trying to send the course id to the controller in a form button, but it does not seem to work. The controller logs the vm.add.year correctly but vm.add.course gets undefined. Why?
index.html:
<form method="post" ng-submit="vm.addCourseToYear()">
<table class="table">
<tr ng-repeat="course in vm.courses | filter:search">
<td>{{course.courseName}}</td>
<td><select id="addCourse" name="addCourse" class="form-control" ng-model="vm.add.year" required>
<option value="year1"> Year1 </option>
</select></td>
<td><input style="display:none" ng-value="course._id" ng-model="vm.add.course">
<button type="submit" class="btn btn-primary" id="{{course._id}}">Add</button>
</td>
</tr>
</table>
</form>
index.controller.js
function addCourseToYear(){
console.log(vm.add.course);
console.log(vm.add.year);
};
I would do the following to fix this:
Add ng-click directive to button:
<button type="submit"
class="btn btn-primary"
ng-click="vm.addCourseToYear(vm.add)"
id="{{course._id}}">Add</button>
Remove the form action leaving just form:
<form>
Change the function to take a parameter:
function addCourseToYear(newItem){
console.log(newItem.course);
console.log(newItem.year);
};
Change this to initialize vm.add.course as course._id:
<td>
<input style="display:none" ng-init="vm.add.course = course._id" ng-model="vm.add.course">
<button type="submit" class="btn btn-primary" id="{{course._id}}">Add</button>
</td>
This follows the patterns found on Angular's site: https://docs.angularjs.org/guide/forms
try changing the code to this:
<form method="post" ng-submit="vm.addCourseToYear(vm.add.course._id)">
hope this solves your issue .. :)
display:none removes the object from the from,
change it to visibility: hidden;position:absolute
<input style="visibility:hidden;position:absolute;" ng-value="course._id" ng-model="vm.add.course">

Angular post call with scala,play

I want to call angular controller through scala.html file.and angular controller should redirect to scala controller to insert data.
I am getting the list from database through same approach .
but during insert it is not able to call function inside angular controller.
Scala html (interns.scala.html):
#import repository.Interns
#(dataList:play.api.libs.json.JsValue,internForm:Form[Interns])(implicit message:Messages)
#main("List Interns"){
<div ng-app="internApp">
<div ng-controller="InternCtrl">
<table class="table">
<tr>
<th >Id</th>
<th >Name</th>
<th >Email-Id</th>
<th >Mobile No.</th>
<th >Address</th>
<th >Emergency Contact No.</th>
<th></th>
<th><input type="submit" value="Add New Intern" class="btn btn-success" data-toggle="modal" data-target="#addIntern"> </th>
</tr>
<tr ng-repeat="intern in #dataList" class="danger">
<td>{{intern.id}}</td>
<td>{{intern.name}}</td>
<td>{{intern.email}}</td>
<td>{{intern.mobile}}</td>
<td>{{intern.address}}</td>
<td>{{intern.emergency}}</td>
<td> <input type="submit" value="Edit" class="btn btn-primary" data-toggle="modal" data-target="#addIntern"></td>
<td><input type="submit" value="Delete" class="btn btn-danger"> </td>
</tr>
</table>
</div>
</div>
<div ng-app="internApp">
<div ng-controller="AddCtrl">
<div class="modal fade" id="addIntern" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="height:700px;text-align:center;width:500px">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1 class="modal-title">Add Intern</h1>
</div>
<form>
<input type="text" placeholder="Name" class="text" ng-model="name" size="30">
<br>
<br>
<input type="text" placeholder="Email" class="text" ng-model="email" size="30">
<br>
<br>
<input type="text" placeholder="Mobile Number" class="text" ng-model="mobile" size="30">
<br>
<br>
<input type="text" placeholder="Address" class="text" ng-model="address" size="30">
<br>
<br>
<input type="text" placeholder="Emergency Contact" class="text" ng-model="emergency" size="30">
<br>
<br>
<input type="submit" class="btn btn-primary" **ng-click="save()"** value="Add Intern" >
<br><br>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="#routes.Assets.versioned("javascripts/list.js")"></script>
}
Angular controller (list.js):
var internApp = angular.module('internApp', []);
internApp.controller('AddCtrl', function ($scope, $http){
alert("hello")
$scope.save = function(){
var data1 = {"id":8,"name":$scope.name,"email":$scope.email,"mobile":$scope.mobile,"address":$scope.address,"emergency":$scope.emergency};
$http({
method:'POST',
url:'/addNew',
data: JSON.stringify(data1),
contentType: 'application/json',
dataType:'json'
})
}})
internApp.controller('InternCtrl', function ($scope, $http){
$http.get('/list').success(function(data) {
$scope.dataList=data;
});
});
This one works for me without any problems:
https://jsfiddle.net/w3vyak05/2/
As you can see - you see the alert and I added a small part where after submission you see the data underneath the form. Of course in your application you would make the HTTP POST call there.
What is different from your approach:
I am using <form ng-submit="save()"> instead of ng-click. Please be careful when switching - you don't want to end up mixing the two:
Warning: Be careful not to cause "double-submission" by using both the ngClick and ngSubmit handlers together. See the form directive documentation for a detailed discussion of when ngSubmit may be triggered.
What else to keep in mind (sorry, off-topic but had to write it down):
In your code you have this: <input type="submit" class="btn btn-primary" **ng-click="save()"** value="Add Intern" > - I guess you just wanted to draw our attention to the ng-click but do not forget to remove the asterisks.
Your list is populated because this is the only "action" which is executed once the Angular controller has been loaded (just wanted to explain why the one controller is working and the other not).
You are using different syntax for making an HTTP POST and GET requests - try to stick to just one variant. Your future you will thank you :)

AngularJS variable in scope - use variables of different scope

I would have a question concerning variables in scope and visibility.
Currently I have two controller variables:
vm.selectedUser
vm.selectedUserRole
The problem is, that I generate the tables in a ng-repeat loop and all inputs and selects in the different tables share this two mentioned variables above.
My question now would be how can I use this two parameters above in my method:
vm.addInstitutionUserConnection(institutionUserConnectionContent.institution, institutionUserConnectionContent, selectedUser, selectedUserRole)
Is there any chance to do this because the input, select elements and the span-button element (add user) have different scopes (this is my guess - I don't know exactly)
Thanks a lot for help!
<div ng-repeat="institutionUserConnectionsOfInstitution in vm.institutionUserConnectionsOfInstitutions">
<div ng-repeat="institutionUserConnectionContent in institutionUserConnectionsOfInstitution.institutionUserConnectionContents">
<div ng-show="addUser" class="row">
<table>
<tr>
<td class="adduserinput">
<input
type="text"
class="form-control"
placeholder="Benutzer durchsuchen"
ng-model="vm.selectedUser"
typeahead="user as vm.userLabelFormatter(user) for user in vm.getUsersByTerm($viewValue) | limitTo:5"
typeahead-min-length="3"
typeahead-wait-ms="100"
typeahead-editable="false" />
</td>
<td class="adduserroles">
<select class="form-control" ng-model="vm.selectedUserRole" ng-options="role as role for role in vm.roles">
</select>
</td>
<td>
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="vm.addInstitutionUserConnection(institutionUserConnectionContent.institution, institutionUserConnectionContent)">add user</button>
</span>
</td>
</tr>
</table>
</div>
</div>
Do it like this -
<div ng-repeat="institutionUserConnectionsOfInstitution in vm.institutionUserConnectionsOfInstitutions">
<div ng-repeat="institutionUserConnectionContent in institutionUserConnectionsOfInstitution.institutionUserConnectionContents">
<div ng-show="addUser" class="row">
<table>
<tr>
<td class="adduserinput">
<input
type="text"
class="form-control"
placeholder="Benutzer durchsuchen"
ng-model="institutionUserConnectionContent.selectedUser"
typeahead="user as vm.userLabelFormatter(user) for user in vm.getUsersByTerm($viewValue) | limitTo:5"
typeahead-min-length="3"
typeahead-wait-ms="100"
typeahead-editable="false" />
</td>
<td class="adduserroles">
<select class="form-control" ng-model="institutionUserConnectionContent.selectedUserRole" ng-options="role as role for role in vm.roles">
</select>
</td>
<td>
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="vm.addInstitutionUserConnection(institutionUserConnectionContent.institution, institutionUserConnectionContent, institutionUserConnectionContent.selectedUser, institutionUserConnectionContent.selectedUserRole)">add user</button>
</span>
</td>
</tr>
</table>
</div>
</div>
Explanation -
I just changed the vm to institutionUserConnectionContent.
reason - since you'll have multiple rows in the table (ng-repeat), if you use vm, you would end up with overwriting the same selectedUser and selectedUser of one row with other.
Hope this helps.

Issue with ng-model and ng-repeat, input value is duplicated on each form field on the page

I have a page where multiple forms are created based on ng-repeat. everything works fine until write something into the input and everything gets duplicated on all the other repeated forms input elements. I have used ng-model="Notify.message" which is nothing but object which takes the value from the input and sends to control on button submit and hence rest of the logic.
I am looking for when if one form is been filled, other forms should keep quite and shouldnt duplicate the values written in input text of form 1.
Here is the code:
<div data-ng-show="alluserposts.length > 0">
<div id="b{{userpost.id}}" data-ng-repeat="userpost in alluserposts" >
<div class="row" style="margin-left: -5px">
<form class="text-center" role="form" id=f1{{userpost.id}} name="userForm"
ng-submit="notify(userForm.$valid, userpost, apiMe)" novalidate>
<div class="row">
<div class="col-xs-8 col-md-4">
<div class="form-group">
<input data-container="body" data-toggle="popover" data-placement="top"
data-content="Any message which you would like to convey to post owner"
type="text" ng-model="Notify.message" data-ng-init="Notify.message=''"
id="u{{userpost.id}}"
placeholder="Enter a Message or Phone number" class="form-control"
required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">It is
required.</p>
<script>$(function () {
$("[data-toggle='popover']").popover();
});
</script>
<input type="hidden" ng-model="Notify.loggedInEmail"
ng-init="Notify.loggedInEmail = result.email"/>
<input type="hidden" ng-model="Notify.postId" ng-init="Notify.postId = userpost.id"/>
<input type="hidden" ng-model="Notify.destEmail"
ng-init="Notify.destEmail = userpost.userEmail"/>
</div>
</div>
<div ng-show="loginStatus.status == 'connected'" class="col-xs-4 col-md-2">
<button class="btn btn-primary" ng-disabled="userForm.$invalid || !userForm.$dirty"
type="submit">
Notify Post Owner
</button>
</div>
</div>
</form>
</p>
</div>
</div>
</div>
</div>
I will attempt following solution to implement it.
create a nested json object with number of forms to display in angularjs controller.
for example
$scope.FormsCollection = {
"Form1" : [
{"title" : "Rockband", "details" : "1hr"},
],
"Form2" : [
{"title" : "The Old You", "details" : "Dr. Smith"}
]
}
obviously, you can use loop to build it or whatever approach suits you best in your context to build the forms collection in angularjs controller.
then in html page you can use following convention to correctly populate each form data
you need two ng-repeat, first for index of each form, and then to iterate nested form object.
<input type="text" ng-model="form[index].firstName"/>
as result you will have $scope.FormsCollection with correct form object data
Please check the example code in following jsfiddle
http://jsfiddle.net/CMnxW/4/
jsfiddle should contain following code.
<div ng-app>
<div ng-controller="controller">
<ul ng-repeat="post in posts">
<li>{{$index}}
<input type="text" ng-model="post.userEmail" />
<button class="btn btn-danger" ng-click="notify(post)" type="button">Notify</button>
</li>
</ul>
<table>
<tr>
<td>destEmail is: </td>
<td>{{Notify.destEmail}}</td>
</tr>
</table>
</div>
</div>
JS:
function controller($scope) {
$scope.Notify = {
destEmail: ''
};
$scope.posts = [{userEmail: 'e#mail.com'}, {userEmail: 'f#mail.com'}];
$scope.notify = function(post) {
$scope.Notify.destEmail = post.userEmail;
//set other $scope.Notify properties from post
//your other notify code...
}
}

Resources