The following is something that I'd like to accomplish with Angular but I'm not sure if it's even possible.
My form would be comprised of 3 views/templates each with it's own controller. Two views are fixed, the third view needs to by dynamically loaded based on a value selected from a dropdown in one of the fixed views. The view and controller name would be derived based on the selected value. If possible I'd like to dynamically load the javascript for the controller of the selected view as well.
I heard some rumblings about this possibly in Angular 2.0 but I'm not exactly sure how to approach it.
Any thoughts? I'm not stuck with Angular so if another framework would work better in this case please let me know.
Unless you are talking about ng-route and $routeProvider, you can have it with ng-include.
By setting ng-include as dynamic, your html will be downloaded and replace the section.
NOTE: however, ng-include does not allow to have script tag in it.
You need to go around using your own directive.
This is the example of using ng-include,
http://plnkr.co/edit/nlGVNfSpJOjIfIXxpEKc?p=preview
<body ng-app ng-init="dynamic='1.html'">
<select ng-model="dynamic">
<option value="1.html">dynamic 1</option>
<option value="2.html">dynamic 2</option>
<option value="3.html">dynamic 3</option>
</select>
dynamic: {{dynamic}}
<div>Fixed 1</div>
<div>Fixed 2</div>
<div ng-include="dynamic"></div>
</body>
Related
I'm using two controllers here. One, productComponentsController, handles a call to our database that pulls back an array of productComponent objects. The other, AddEditArticleController, controls the 'Create New / Edit Existing Article' page.
On my Add/Edit Article page, I want a <select> to populate with productComponents, and, if I am editing an existing Article, to be pre-selected with that Article's current productComponent.
Simple as this seems, I cannot make the field pre-select with the existing productComponent, though it does populate the <select> with them correctly. I've tried ngRepeat and ngOptions and both work for populating the dropdown, but neither works for pre-selecting the existing productComponentID from the array returned by the server.
My HTML, using ngOptions:
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
ng-model="vm.selectedComponent"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
class="form-control input-md"
ng-options="component.name for component in pvm.productComponents track by component.id"></select>
My HTML, using ngRepeat:
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
ng-model="vm.selectedComponent"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
class="form-control input-md">
<option value="{{component.id}}"
ng-repeat="component in pvm.productComponents"
ng-selected="vm.selectOption(component.id)"
ng-bind-html="component.name"></option>
</select>
<!-- vm.selectOption() returns true if the current option's ID equals the productComponentID of the current Article. Therefore this option would be selected. -->
In my AddEditArticleController, I set vm.selectedComponent equal to the productComponentID of the Article that was returned by the database, in the promise.then() of my call. While vm.selectedComponent does change, this doesn't do anything to the dropdown.
Also, in my generated HTML, I get the option: <option value="? number:47 ?"></option> (for an Article where the productComponentID is = 47). Apparently this happens as a result of the model being set to an unknown value but I don't know why the model would be set to anything other than an integer id.
Is this because my select is accessing multiple controllers, or am I missing something obvious here? Any help is greatly appreciated, let me know if more info is needed.
I believe you're looking for ng-init...
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
class="form-control input-md"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
ng-model="vm.selectedComponent"
ng-init="vm.selectedComponent=productComponentID"
ng-options="component as component.name for component in pvm.productComponents track by component.id"></select>
So it turns out that because the model has to be a string, I have to cast the vm.selectedOption to a string whenever it's changed (in this case, in the vm.selectOption function) using String(). This is using ngRepeat. ngInit seems to have no bearing on how my code works.
Boom, that's it, and my code works.
I have a created a angularjs application. In the Thread.html page, I am having the combobox to load the strategy list.
<select class="txtBox" data-ng-model="editor.strategy">
<option value="">--Selected Strategy--</option>
<option data-ng-repeat="s in strategyList" value="{{ s.Name }}">{{ s.Name }}</option>
</select>
I am include the template using ng-include in the same page.
<div data-ng-include="'/views/Editor.html'"></div>
Inside the editor.js controller, I am able to access the $scope.editor.strategy for the first time. After post the data, I am trying to clear the combobox by seeting $scope.editor = {"strategy":''}. How to reset the combobox from the editor.js controller. I am not sure where I am doing mistake. Kindly help.
You'll have to post more of your editor.js code, so we can see how you are populating strategyList. Since you are using ng-repeat (why not use ng-options?), you'll have to reset strategyList, not editor.strategy.
I have a web application to write and in the majority of cases I have a 1 to 1 relationship between objects of Class A and objects of Class B, so I hop from one to the other. Sometimes it is 1 to many, in this case I need to display a popup menu and let the user take a selection from the menu and then I will navigate as if it was 1 to 1.
All this is brand new code so no legacy JavaScript/J Query exists.
I seldom write web code but from I have learnt recently Angular appears to be an architectural correct way to do things instead of writing my own JavaScript I want to use the correct Angular method.
But I need a start point. I was looking for a Angular directive and I can see things like input[email] and input[month] but I cannot see input[dropdown] or input[popup].
Can someone please steer me in the right direction? Thanks.
For dropdowns you want to use html-select. To dynamically add values to the dropdown use ng-options with the html select.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
I am using bootstra-multiselect along with angularjs in my project. During testing what i found is, the "selected" attribute name is getting conflict between these two. Following is my HTML markup for my multi select directive.
<select id="example-getting-started" multiple="multiple" name="multiselect[]" data-dropdownmultiselect>
<option data-ng-repeat="option in options" value="{{getOptionId(option)}}" data-ng-attr-selected="{{isOptionSelected(option)}}" data-ng-bind-template="{{option.name}}"></option>
</select>
What i found is, data-ng-attr-selected="{{isOptionSelected(option)}}" is not getting compiled by angularjs. Seems like angular js "ng-selected" directive is getting applied instead of my required normal attribute.
How can solve this? I don't want to change the code or either bootstra-multiselect or angularjs to avoid future maintability. Is there something in Angularjs to stop running its predefined "ng-selected" directive?
Following is plunker code to demo this problem
Angularjs and conflict of directive name with other module
You could use ng-selected="expression" which will add selected attribute with selected value in the current select option, I don't understand why you are doing it using ng-attr while you can control that using ng-selected="isOptionSelected(option)"
Markup
<select id="example-getting-started" multiple="multiple" name="multiselect[]" data-dropdownmultiselect>
<option data-ng-repeat="option in options" value="{{getOptionId(option)}}"
ng-selected="isOptionSelected(option)"
data-ng-bind-template="{{option.name}}"></option>
</select>
Working Plunkr
Let me know if you want anything else on it, Thanks :)
I'm coming to Angular from a jQuery / Backbone background so I'm new to Angular. Anyway, so I'm trying to show/hide divs based on select box values. Basic stuff I know.
The problem is that with the code block below even though <div ng-show="designer"> is the last element in the DOM it shows up before both of the switch-when statements. Moving it around makes no difference.
<select ng-model="designer">
<option value="designerYes">Yes</option>
<option value="designerNo">No</option>
</select>
<div ng-switch on="designer">
<div ng-switch-when="designerYes"...>
<div ng-switch-when="designerNo"...>
<div ng-show="designer">
</div>
I suspect the problem is related to when the events switch and show events are fired but I'm not sure how the best way to troubleshoot or fix the problem. Any ideas on a solution?
UPDATE: The solution (for my case at least) was to not mix ng-switch and ng-show. The first answer right. Because the switch statements aren't in the DOM they are appended after the already available ng-show div.
Here's the answer...
<select ng-model="designer">
<option value="designerYes">Yes</option>
<option value="designerNo">No</option>
</select>
<div ng-show="designer == 'designerYes'"...>
<div ng-show="designer == 'designerNo'"...>
<div ng-show="designer">
This will always show the 3rd DIV when a selection is made and conditionally one of the others based on value.
Initially designer will be undefined until you make a selection. So the 1st two won't be rendered I guess. Can you initialize it with one of the values and see if that helps?