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).
Related
My use case is completely different. When I strip off all the other factors, it boils down to this.
Say I have the following input element
<input type="text" [customDirective] [(ngModel)]="myValue" >
The job of this customDirective is to look into value entered by the user and changed its value based on the input on the fly.
How to achieve two-way binding for this.
I played around with ControlValueAccessor, DefaultValueAccessor. But no matter what I do, I was not able to achieve the two-way binding. The maximum I achieved at one time is view update on model update but not the other way round. But that code is somewhere lost.
Here is the vanilla plunker link.
PS: I already referred the following. But none of them were helpful in achieving 2-way binding w.r.t to directive
http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
angular2 wysiwyg tinymce implementation and 2-way-binding
Thanks in advance
Finally figured out how to do this.
Model to UI changes can be done using ControlValueAcessor
UI to Model can be done like below
import {Output} from '#angular/core';
Use the event emitter
#Output() ngModelChange = new EventEmitter();
Whenever data gets changed emit the event
this.ngModelChange.emit(YOUR_NEW_VALUE);
Here is the detailed example
Using Tinymce editor as a directive
I want to display a list of events of very different types that should have different UI logic. Yes, they have common properties (like name, date/time, location etc) but also sets of custom properties that can be simple text, typeahead items, drop down lists etc. Depending on the specific event type (there will be tens of them) I need to handle user input in different ways. For example, on select a typeahead item I want to clear two other fields etc.
I'm gonna display those events using ng-repeat and dynamically load template views depending on the specific event type. These views will have proper controllers that are specific to the business object. I still haven't make it work but please advice me.
Is loading type-related views with controllers inside is a good idea
for this task?
Would directives instead of controllers be better?
Is there a way to dynamically set controller/directive name in the HTML attribute?
Any other advices?
yes
yes, use directives. If you have a base event definition, it is probably best to define an element directive for that and use attribute directives to extend/customize the functionality for different event types.
not exactly, but you can use ng-switch on your list item element.
example:
<li ng-repeat="event in events" ng-switch on="event.type">
<my-event event="event" first-type ng-switch-when="type1"></my-event>
<my-event event="event" second-type ng-switch-when="type2"></my-event>
<my-event event="event" third-type ng-switch-when="type3"></my-event>
<my-event event="event" ng-switch-default></my-event>
</li>
Use require: 'myEvent' in your extending directives to gain access to the base myEvent controller.
Demo
In my site I have a case where I show a simple order which I can add/remove items to and pay to close the order.In other case , I just want to show the order without the option to modify it.
What is the best way to do this regarding to reuse the view ?
Should I create a directive which I can configure to not show update actions
or should I create 2 templates (one for each scenario) which bound to the
same controller but each template use only the methods it needs from the controller?
Thx!
You may conditionally close GUI items when your order view is in readonly mode, for example:
<button ng-if="!readonly">Add new item</button>
Of course your controller should have
$scope.readonly=true;
when you are going to display the view without ability to modify it.
I've been learning backbone.js over the past couple of weeks and am about to start using it in anger in an app I'm writing. My question to you is about a use case for models and collections in a Bootstrap 3 navbar.
On my server side I authenticate the user and, based on their profile, assign them a role (author, editor, administrator etc.). I then construct an object that contains the appropriate menu structure for the user's role and pass that to the client using Handlebars. The intent is for the browser to construct the HTML to render the menus according to the properties (key/values) in the object using backbone.
My thoughts are that the navbar itself is a collection of models (navbar); each dropdown menu or link on the navbar is a single model (navbarItem); each of these contains a collection of menu items (navbarItemMembers), these collections being of models of each individual menu item (navbarItemMember). I can then set event listeners against each navbarItemMember to trigger an appropriate route or render action as appropriate.
So, getting to the point... am I over-complicating things? A collection containing models each containing a collection of other models, each of those mapping to a view that renders a on the main page. Seems convoluted to me, but from my (albeit limited) understanding of backbone.js it does seem the right way to do this...?
Advice much appreciated from those more experienced (battle scarred?!) than I. Thank you.
Use a collection when it's going to provide some benefit to you over a plain model. The benefits could be either
Interacting with a RESTful service where you'll want to not just get a list of data but then separately fetch/modify/add/delete individual items is that list
Defining separate Views for each item in the list rather than a having a single View that iterates over the list.
I don't think a basic navbar benefits from either of those. If your navbar has some super fancy elements beyond just links then maybe #2 applies but otherwise keep it simple, use a single model with a single view/template
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.