angular data not binding complete data from model to view - angularjs

Hi i am making a edit profile page for a user, and i am using MEAN stack
saving a fresh user works fine, now for editing the details, I have fetched the saved user from mongodb and this is what i get on the browser console( which is correct)
...
firstName: "Syed",
middleName: "",
lastName: "Faizan",
dob: "07/06/2015"
...
when i try to map these values to the View, all the data is not getting filled in the View. (i am using the same form that i used to save a fresh user, so logically it should map correctly, but it isn't).
There are other fields too that aren't getting pre- filled( only some, not showing the full json)
and i would have shown the screenshot of the webpage, but it seems i can't attach a image unless i have 10 reputation.
i tried using $scope.$apply() method, no luck.
EDIT: Jade Code for the above
form.login-form.form-horizontal(method='post', role='form' name='userForm')
input#fName.form-control(placeholder='Your first name', required, name='fName', type='text', ng-model='UI.student.firstName')
input#mName.form-control(placeholder='Your middle name', name='mName', type='text', ng-model='UI.student.name.middleName')
input#lName.form-control(placeholder='Your last name', required, name='lName', type='text', ng-model='UI.student.name.lastName')
ng-bs3-datepicker#dob(name='dob', ng-model='UI.student.dob', language='en')
....
Controller Code:
$http.get("/fetchStudentData").success(function(response){
$scope.UI.student= response;
console.log(response);
})

Related

angularjs http.patch partial model

I'm probably groping in a glass of water...
I have a data source like this in my controller
$scope.data = { name: John, lastname: Doh, age: 31 }
In my view i have a form to edit only name
<input type=text ng-model="data.name">
Now, on click i would like to send only the name to a specific service, but if I do http.patch('myapi/path',data) i send all the model data, also lastname and age...
Ho can i fix to send only name?
You have defined $scope.data to be an object with 3 keys name, lastnam and age. Then, you are using the same object to perform a http patch. If you only wish to send the new name, you can try this
http.patch('myapi/path',{name: data.name})

Hard refresh needed to display data in Umbraco.DateTime control

I have a custom section in Umbraco, when you click a node in my custom tree, the URL is correctly displayed and the data loads successfully.
When you then click another node in the tree (sibling, exactly the same controller and view)
All the data loads...... except for the data that should shown in the calender control. If I reload the page the data loads.
For testing, I created and added an extra control but this time it is just a Umbraco.Textbox, and the data always loads correctly
So what is it about the Umbraco.DateTime all the other controls I have on the same page load drop downs, check boxes etc
Is there something I can do in my Angular(v1.6) controller to force these to update everytime?
Update: Code in my view looks like this.
<umb-property property="vm.endDateTimeTxt">
<umb-editor model="vm.endDateTimeTxt"></umb-editor>
</umb-property>
<umb-property property="vm.startDateTimePropertyEditor">
<umb-editor model="vm.startDateTimePropertyEditor"></umb-editor>
</umb-property>
<umb-property property="vm.endDateTimePropertyEditor">
<umb-editor model="vm.endDateTimePropertyEditor"></umb-editor>
</umb-property>
And For the Umbraco.DatePicker controls this is the method that genrates the property editor
function buildUmbracoClockPropertyEditor(alias, editor, view, label, description, config, mandatory = true) {
return {
editor: "Umbraco.DateTime",
label: label,
description: description,
hideLabel: false,
view: view,
alias: alias,
value: null,
validation: {
mandatory: mandatory,
pattern: ""
},
config: {
pickDate: true,
pickTime: false,
useSeconds: false,
format: "YYYY-MM-DD HH:MM:SS",
icons: {
time: "icon-time",
date: "icon-calendar",
up: "icon-chevron-up",
down: "icon-chevron-down"
}
},
}
I have also updated the format of the string when it is loaded in to the text box so now this is before a hard refresh.
And this is after
So as you can see the data is there, it gets loaded in to the text box first time you click on a node, but required me to go to my browser address bar and press enter to get the dates to load in to the Umbraco.DateTime controls.
this is just nuts! the data is there, the format is the same... what else could it be!
The reason is that Umbraco is loading all javascript on load and we need to force it to load again.
I have tried to recycle AppPool, restart website, touch web.config etc. its not easy to reload it.

Angular advanced searchbox lose focus after selecting suggested key-value per keyboard

I've implemented the angular-advanced-searchbox (with AngularJS 1.5.8, ui-bootstrap, JQuery) like the demo-page:
html
<nit-advanced-searchbox ng-model="searchParams" parameters="availableSearchParams" placeholder="Search..."></nit-advanced-searchbox>
script
$scope.availableSearchParams = [
{...},
{
key: "city",
name: "City",
placeholder: "City...",
restrictToSuggestedValues: true,
suggestedValues: ['Berlin', 'London', 'Paris'] },
{...}
];
};
Here is a Plunker of this implementation too. I'll refer to this example to picture my problem.
If I type 'city' in the searchfield and select it by hitting enter, then I'll see the suggested Value-List (Berlin, London, Paris) for about a second and then the focus 'll lost and the selected key-value (city) is automatically removed. It seems this won't happen, if the mouse pointer is rested over the search-input field (without any action).
With this issue, I can't use this module on my site - but I really want to :) Are any suggestions out there?
OK, this (low-level) fix worked for me - i've just commented line 107 ():
angular-advanced-searchbox-tpls.js [#107]
$scope.searchQueryChanged = function (query) {
// updateModel('change', 'query', 0, query);
};
This line is used to build 'pre-queries'. If you start typing 'city', the scope of searchParams generate a temporary query on the fly and would be changed to the selected key - g.E.:
{"query":"ci"}
This will then lead to a timeout after 'city' is selected. I don't know this 'query' is used for - all things 'll do their job furthermore. But by time I'll looking to a real fix for this problem :)

Protractor element caching

I started to learn testing in Angular and have a little problem doing a serie of test in the same view.
I have a form with some inputs for customer data. I use it both for add new customer and edit an existing one.
So, firstly I test adding a new customer, then I click back, and click the first customer in a list (not the recently added). The data shows correctly in the view, but the test fails saying Expected 'new customer' to be 'customer 1'. Somehow element.name is caching the previous value.
Here is the test:
describe('Showing Customer data', function(){
var customersMenu, homeMenu, firstListItem;
beforeEach(function() {
customersMenu = element(by.css('.ion-person-stalker'));
homeMenu = element(by.css('.ion-home'));
firstListItem = element(by.css('.firstListItem'));
});
it('should create a new customer', function() {
customersMenu.click();
var newButton = element(by.css('.button-fab'));
newButton.click();
element(by.name('name')).sendKeys('new customer');
[...] // The other fields...
homeMenu.click();
});
it('should display correct customer data', function() {
customersMenu.click();
firstListItem.click();
expect(element(by.name('name')).getAttribute('value')).toBe('customer 1');
homeMenu.click();
});
});
It looks to me like you are sending the keys "new customer" to the name field here:
element(by.name('name')).sendKeys('new customer');
should you not be sending "customer 1" and the value of the name field like this?
element(by.name('name')).sendKeys('customer 1');
then later when you get the value of the name field, this will be correct:
expect(element(by.name('name')).getAttribute('value')).toBe('customer 1');
Finally I achieve this.
The problem
The problem was I was navigating like an user will do. I was returning to home view and then going again to list view, and detail view. The problem with that is the previous elements remain, so element(by.name('name')) has two posible values: 'new customer' and 'customer 1'. I we use element() instead element.all(), Protractor will pick up the first element in array.
The Solution
Instead of returning home clicking the button in sidemenu, now I use browser.get('/') to return to the root of app. It will clear DOM and seems is like you run the test as the first one.

Drupal 7 - Content type inside a content type - Like field collection

I´d like to create a content type called "contact" that will be share in other content types, like "client" and "prospect". When I create a new client, I´d like to be able to create, in the same form, new contacts for this client, like a field collection. For example:
ADD NEW CLIENT
Name:
Firm:
Email:
Contacts (multiple value)
Name:
Email:
Add new contact
But, in the "Contact" content type I have a lot more fields that I can fill up later:
Name:
Email:
Phone:
Address:
City:
State....
Thanks!
You could use the rules module to setup a rule that whenever a new 'Client' entity is created a new 'Contact' entity is created based on the values in the client contacts fields (name and email).
However I am unsure as to how you could implement an 'add another item' for field groups in a form (which is what I assume is the desired functionality of your 'Add new contact').
You may also want to make sure to include an entity reference field on your contact entity type, so that it can reference the client entity to which it is related. That would give you the option in the future to display a view of contacts related to a client.

Resources