Im working with angularjs/1.3.6 and v0.10.0/angular-material.js with a md-select field with name="txtGenero" but when the form have been Submitted with ajax the md-selected has a dot at beginning of name field like '.txtGenero' in the image below.
https://plus.google.com/photos/+TommyHern%C3%A1ndezA/albums/6175087393788917697/6175087392180342338?pid=6175087392180342338&oid=118016940134163401130
I hope can help me thanks.
I don't exactly know why the ngFormController has the .txtGenero field.
However you should use ngModel to bind your form fields to a model and post that model, not the form controller itself. You can use angular.element.param($scope.registro) to get the the fields from your model as form data.
You don't need jQuery for any of it.
Updated plunkr: http://plnkr.co/edit/IFOsFgiQBo7vJVzkBxaf?p=preview
(I updated to angular-material master)
Try to provide your code well formatted, this is kind of a mess to work with.
Related
I am creating a dynamic form from angular in index.html using ng-repeat over an array of JSON object. On submit button, I need to pass form data into a post request in form of a map like :
{"key":value,"key":value}
The key is dynamic label generated in the form and value is the input from a text field or drop-down. Please help me. How I can create a map dynamically? You can find my code here.
I solved my problem. This was a little bit tricky to create a map from dynamic form. Code has been updated on plunker.
Step:
I declared a json object response at script.js.
Response[filed.attributeLabel] will work as a key and value will be bind when we select or enter some thing in dropdown or text filed avvording to key in scope variable.
I am trying to create exactly same form given in this fiddle
steb by step angular form
but whenever i click on the next button data entered in the first step resets.. how can i prevent this? On submit all data is undefined while reading in javascript.
Please help me..
In the JsFiddle code you provided you are not retaining the users data, meaning that data is being Binded to anything in the controller. So when leave the section the data is removed.
To retain data make the following changes:
// In your controller add the following object to the $scope
$scope.user = {}
// In your HTML code add the following to your input fields
<input type="text" id="teamName" ng-model="user.teamName" placeholder="Team Name" />
Notice the ng-model tag in the input field this is what binds your data to the user object within your controller
Heres a working JsFiddle, please note that I only updated the Team Name field. Type something in the Team Name field and go to the next section and it will retain your data. You will need to update the remaining fields.
I am using the angular-ui-select directive to create an auto-complete input field. I want to be able to click and focus the field without the dropdown options appearing. The Plunker example in the documentation works this way, but I cannot get mine to behave correctly. Please help.
Here is my code:
<ui-select ng-model="customer.selected" theme="bootstrap">
<ui-select-match placeholder="Start typing..">{{ $select.selected.family_name }}</ui-select-match>
<ui-select-choices repeat="customer in customers | filter: $select.search">
<div ng-bind-html="trustAsHtml((customer.family_name | highlight: $select.search))"></div>
</ui-select-choices>
</ui-select>
Here is their Plunker example that is working the way I would like it to.
http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview
I have a same issue. I want to be able to click and focus the field without the dropdown options appearing.
Here I am sharing my solution. May be it will help someone. I made changes in Selectize theme example in plunker shared by #Corey Quillen. I had cleaned up other things so it will help.
1) Here first I had add reset-search-input="false" in ui-select directive. So it will not reset search input.
2) Then I had replaced filter with custom filter propsFilter. Which is already useing in Select2 theme. And put
if(!props.name.length){
return out;
}
in filter above If condition. In demo.js file.
So data return empty if no search text entered.
Here is the plunker example of that.
ui-select by default shows a dropdown, I dont think we can change that. But you can change its binding data. In the plunker example the ui-select is bind to model 'address.selected', which initially is empty, thus nothing pops up. But once you start typing the refresh will call the function refreshAddress() to populate the results into address. Once the results are populated, ui-select finds that its model(address) has data and start showing a dropdown. After you have searched for something, try to click on the textbox, it will still show you the result, beacuse they are still present in the model.
Since, you are trying it with a local variable I suppose, it is pre-populated with data for ui-select and hence it shows it. I think you should try to make a request in you code to get that data and use refresh and refresh-delay. If you dont have a web service and want to use local data, I would suggest bind the select to an empty model and put data into that using a custom function for refresh, you might have to write a custom search functionality into the refresh function, but you can use javascript's search() or indexOf() for that.
I'm using angular bootstrap typeahed.
It's possibility to display not-full word in input with blur, like in https://twitter.github.io/typeahead.js/examples/ ?
I try do this in ui.bootstrap-typeahed, but I have only typed chars.
I use $http request to get elements for data.
Thanks for any idea.
Found the answer in the typeahead documentation. Typeahead fills the input with the selected or autocompleted value on blur. To avoid this, $('#selector').typeahead('val', '<contents>') should be used instead of $('#selector').val('<contents>').
I'm learning AngularJS and I have a question regarding the databinding for select elements. The databinding for textboxes works without any kind of event handling code. Once the ng-model attribute is set textbox updates when the model property changes and vice versa. There is no need for ng-change attribute.
However, for select elements we need to write functions that will be called via ng-change atribute.
Why does angularjs handle databinding without an ng-change attribute for textboxes but requires functions that will be called via ng-change attribute for select elements?
UPDATE:
Added the fiddle in the comments section. The example is from AngularJS in Action book. Click on one of the stories, change the textbox value and the model is updated. Change the selection in dropdown model is not updated.
UPDATE:
Added a new fiddle in the comments.
Thanks.
I've created a fiddle that works here - The issue is really just the dummy data here. In the original fiddle, the object created in the statuses array for {name:'Back Log'} and {name:'To Do'} are not the same (not ===) as the {name:'Back Log'} and {name:'To Do'} objects created in the dummy story objects.
To make the example work, I pass the indexed statuses into the getStories function. However I think this is really just a case of demo-induced confusion. (I've been looking at the MEAP for Angular in Action as well, and I think it could be simplified a bit like this one, that uses simple string statuses that will pass the === test
var getStories = function(statusesIndex) {
var tempArray = [
{title:'Story 00',
description:'Description pending.',
status: statusesIndex['To Do']
},
{title:'Story 01',
description:'Description pending.',
status: statusesIndex['Back Log']
}
];
return tempArray;
}
I think your confusion might be a result of the select documentation still being incorrect. (See my Disqus comment.) ng-model can and should be used with select. ng-change is optional and it just gives you a hook should you want to do something each time the selected option changes.
Normally you should use ng-options with select.
If i understood your question correctly then I think your guessing is wrong because for select boxes, you do not have to invoke ng-change event in order to fetch the selected option.
<select ng-model='select'>
<option>....</option>
<option value='one'>One</option>
<option value='Two'>Two</option>
</select>
// Your selected option will print below... without invoking ng-change
<div>You selected: {{select}}</div>
Demo: http://jsfiddle.net/jenxu/1/