I have a select combo box when upon changing, needs to load a specific html partial/page into a div on the same page as the select. I am new to Angular, so not really sure the best way to do this. I know how to do it using jQuery, how didn't know if this could be accomplished using a Directive.
Thanks, in advance.
Solved the issue:
Using ng-include have the combo box change a url variable, i.e.
$scope.myPartialPath = "partials/template1.html".
Then have ng-include bind to the variable, i.e.
ng-include="myPartialPath"
Related
I have a problem with a custom directive that I wrote to simulate a tab view in angular.
This directive has only a method to redirect from a state to another.
This directive works fine.
The template of the directive is a div with a uib-tabset and some tabs that contain the views to show them.
This works fine.
Now I need this feature: from a view in a tab, I need to change view with a state.go(view) and I must also go to the tab which contains that view.
I tried different solutions that I found here or in other forums, but probably my requested feature is different from others.
Thank you.
I resolved with the answer in this link.
Sorry for my repost.
Angular UI bootstrap tabs - Can't change tabs with a button inside a tab
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 problems with Kendo PanelBar in combination with ng-repeat and modifiying dynamically the datasource!
You can see a small demo here:
http://trykendoui.telerik.com/#IT-SCHMITZ/OrEK/2
After clicking the button "Add new album" you can see, that there was added a new item to the panelbar. Unfornately it is not correctly rendered.
Regards,
Daniel
This cannot work with ng-repeat once the widget is initialized. A workaround would be to use the dataSource argument, but since the PanelBar does not currently support a live data source you need to use k-rebind to rebuild the widget when the data changed.
Here's an example: http://trykendoui.telerik.com/#mishoo/Udep
I'm trying to make a dropdown menu. I'm usinig the Dropdown toggle directive form ui-bootstrap. I want to customize this a little. I want the drop down title to change to the option which I have chosen.
I've made my own directive for this. In this directive i add two data objects, the options and the selected option. I also have one function which changes the selected option.
Select category: <my-directive my-options="categories" my-selected-option="selectedCategory" set-my-selected-option="setCategory(selectedCategory)"></my-directive>
Js fiddle: http://jsfiddle.net/per_strom/QW634/2/
The problem is the setCategory function is not changing.
This is my first directive I'm writing so I may be totally of. Perhaps there's a much better way to do it.
Why can't I just use a normal select box? It's a GUI thing. In this case I prefer lists.
I appreciate any help I can get!
You should pass the function reference to the directive rather than a function call. Change the part of your code to
`set-my-selected-option="setCategory"`
I have an angular multi-step form in a modal window. It has a few different views and works great but at the end of it I just want to display a tiny snippet of HTML along the lines of 'Thank you, we will be in touch shortly'
However, I thought about creating a view for this with a partial but it seems incredibly over-engineered for what it is. Is there any way in angular of just replacing the view with that sentence without creating a whole new view? This will be called from a function in the final controller
Use ng-show and ng-hide to do this in your view. Suppose if your view is no longer needed you can hide it and show the Thank you snippet at its place by using ng-show.
ng-switch is what you are looking for.
From the docs:
"The directive itself works similar to ngInclude, however, instead of
downloading template code (or loading it from the template cache),
ngSwitch simply choses one of the nested elements and makes it visible
based on which element matches the value obtained from the evaluated
expression."
http://docs.angularjs.org/api/ng.directive:ngSwitch
you can this code, if you have one area of content
<ng-view></ng-view>
good method you can find in LINK