Showing an example will likely make more sense than trying to explain this. Please reference this http://plnkr.co/edit/ipGYEX?p=preview as it ALMOST does exactly what I need.
In the example, click Add to create a new select menu and choose an option. This should add it to the parent form. Currently I'm handling this aspect with an $emit. The core problem is that I can't find a way to assign $index to each select. I'd like to attach it to the model name in order to make each one unique. However, simply doing something like ng-model="selectNum{{$index}} causes an error when passed through attrs.ngModel. As is, the ngModel is repeated for each dropdown that's added and thus, every time the form gets overwritten. I WANT to add each select as a unique object to the form - and update that specific instance should the associated select change.
Can anyone provide some insight on how to either attach the $index or perhaps another way of updating the form?
Not a direct answer to getting the values into the form object, but here's an option similar to something I'm doing for a very similar situation:
http://plnkr.co/edit/uEHFWgRQ9fP2gpeWuE5y?p=preview
Basically storing the values within the elements of the array being repeated on, then I use that object from the model for a post to the server.
Related
I have a list of fields that are not exclusive. Typically you would use html check boxes and bind each one to a Boolean value in the model. However I have been thrown a curve, to save space the users want all of the items to be presented in a select that allows multiple selections. I know how to create the select itself in HTML however I am not sure the best way to wire that up the model using the 'Angular way'. Is there a better solution than creating something in the controller to "translate" the select result to series of Booleans?
Welcome to SO!
Try using this directive:
https://github.com/amitava82/angular-multiselect
More info on SO here: AngularJS. Bootstrap multiselect without JQuery
I ended up creating a var in scope for the dropdown. Which wasn't too big of a deal as I keep my view model in a var called viewmodel, so it will not post to the server with rest of the view model. Then in my load and save functions I 'boxed' and 'unboxed' the booleans into a string array I fed to and read from the dropdown. little bit of work but it works. I was hoping the AngularJS framework could have handled this lifting for me but whatev.
Too bad you cannot data bind to an option in the select list (selected == true).
I wanted to have a Dialog box for asking to save the current changes or not. For that I was searching for an event in AngularJS which triggers on change of any scope variable.
As per my logic I will achieve this by creating event on every control and update a variable to say 'Modified' else will have default value.
Is there any other way? Since my logic will need an event on every control.
If you're using a form directive, this is pretty simple. The value of myForm.$dirty will be true if any property has changed. You can even check an individual field with myForm.myField.$dirty.
If you're not using a form, you should probably consider it for what it sounds like you're trying to accomplish. One of my favorite angular features as it makes validation, etc. a breeze!
Reference: angular docs
Take a look at $scope.$watch(...) on the Angular docs, there is a great discussion on how $watch works here on another Stack Overflow question
You should, at the very least, be able to trigger alerts when specific scope-elements have changed. If you are using a form, then the $dirty approach above is absolutely a brilliant way to go.
Im trying to create a form, first element should be a tag with a few options and each of them will dynamically bring up a different set of forms depending on what the user chooses. The idea is within the select tag there will be different categories like cars, properties etc.. first user only sees that and when chose, it will bring up a set of input fields that required for that category.
Anyone got an idea what would be the best way to do it in angular?
Using the ui.router module, you can populate a DOM element (ui-view) with an HTML template file. On selection of the dropdown, you're telling angular to go to a different "state".
Check out the following plunkr I made: http://plnkr.co/edit/jnKQOvkE4nJinEQ5zhr6?p=preview
I would like to have a directive for my validation messages that takes the name of the form input being validated and then displays itself if the named form input is invalid. For the sake of good UI, I want this to only happen after the input is blurred. Here's a Plunkr: http://plnkr.co/edit/qLSsCHpAPLdZsCPG8iaf
Obviously, ctrl[attr.tgValidates] isn't giving me an object I can bind to (although it is referencing the correct field), but I'm not sure how to properly select the element I do want. jqLite doesn't have great support for selectors, so it's a tricky to do what I want without pulling in all of jQuery. I guess I could also pull in $document and select off that, but I'm wondering if there's a better, more Angular way to approach this?
I have a basic form inside a window. This form has several check boxes and I need to some how be able to select all with another checkbox. How am I supposed to access these checkbox types. I am trying to get reference to "this" and then this.getForm().getFieldValues() but is there a better way to do it, as I only need to get the checkboxes and not other fields.
Thanks,
SS
By default ExtJs fields don't have a getForm() method to get access to their parent. However, you can use this override to add this method. Once you've got the form, you can get access to any field you like, which should let you do what you describe.