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.
Related
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
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 have a use case to toggle the view of a form using a button. The button is not nested in the same structure of the form, and is out side the scope of the forms controller.
What is the best way to have this toggle button comunicate to the contents controller to display this content?
I have had a similar problem and for advanced comunications between controllers i would recomend a service. A service can be injected into multiple controllers so they can share information & state.
However if all your after is something like a button that you can place anywhere that will show the form, you could consider using the $location.path?
eg. on a view with a list of users
www.example.com/users
append edit
www.example.com/users/edit
then have the form controller watch the $location.path and open itself when it see's edit ?
Is it possible to modify $scope variables on button click if the button is outside the controller area?
For example:
<input type="button>
<div ng-controller="MeetingsCtrl">
Using classes or IDs to find elements is not how things are typically done in Angular.
A controller is typically defined on the top-level element of each view. If your button belongs to the view managed by MeetingsCtrl, it should be inside the div.
However, maybe your button is actually part of another view, in which case you need two views to interact with each other. This is normally done via services, with each controller injecting the same service. Or you could use events.
Yes it is possible. What you have to do is, create different class/id for both input and div tags.
Then make your div as absolute and input as relative. Problem solved!
I am looking for pattern in Backbone js to switch between readonly and edit view. If the trigger for the view is external to the view then no problem I can create the appropriate view ( readonly or edit ) and render it, but in my case the trigger for the edit view will be inside the readonly view.
For example lets say I am displaying a Prescription and by default it is in readonly mode and on hovering a edit icon gets displayed. Onclick of this edit icon the readonly view should now be replaced with edit view. What would be a best approach to achieve this. Below are few options I am considering
Have a single PrescriptionView with the edit icon and all the form fields required for the edit mode in it. It will also have the logic to change the view from readonly mode to edit mode based on edit trigger.
Have two views PrescriptionReadView and PrescriptionEditView. The ReadView will have the edit icon and onclick replace the readview with editview.
I am inclined towards #2 but not sure how to implement it in a elegant way. Any thoughts on this will be helpful.
Thanks
Zafer
Your life will be considerably less painful, if you separate your pretty view from your edit view, since they are, for all intents and purposes, two distinct views of the same data, with different event-handling needs and different behavior. So, your instincts that lead you towards #2 are right on the money.
The cleanest implementation I can think of is to make a container view (say, PrescriptionView) that can handle the mode-swapping events. The container will own a reference to the currently active prescription view, and will handle the creation of that view, and the cleanup (remove and unbind) of the inactive view. That keeps all of that logic nice and self-contained.