I have an ng-repeat in my user.html code and when I click a button in this view, I want to render other html by an href that redirect to a new route.
The thing is, I want to keep the ng-repeat that were at user.html in this new view and in this new view (modalOfDonations.html), I want to do an ng-repeat by the array of donations.
I want to keep the same controller of user.html too
does anybody can help? I am really a beginner in angular
route
.when("/modalOfDonations", {
templateUrl: "modalOfDonations.html",
});
user.html
<div ng-repeat="ev in event">
<article>{{ev.description}}</article>
<a href="#!/modalOfDonations">
<button>How can i help?</button>
</a>
<div ng-include src="'modalOfDonations.html'"></div>
</div>
modalOfDonations.html
<h4>Como posso contribuir?</h4>
<div ng-repeat="donations in ev.donateTypes">
<div>{{donations.name}}</div>
<div>{{donations.min}}</div>
<div>{{donations.total}}</div>
</div>
Related
I'm trying to load a template into an Angular app depending on a parameter. It would be inside a ng-foreach:
<body ng-app="MyApp" ng-controller="ExampleController as example">
<div ng-repeat="item in example.items" class="someClass" ng-switch="item.type">
<!-- load a different template (partial) depending on the value of item.type -->
</div>
</body>
Fiddle: https://jsfiddle.net/rsvmar2n/1/
Can I somehow do that? I was thinking about using ng-switch: https://jsfiddle.net/rsvmar2n/6/
But I'm sure there's a more angular way to do it.
Edit: I would like NOT to do an http request for every partial I would load (and I think ngInclude does that.
Edit2: Ended using ng-include and cached templates. https://jsfiddle.net/rsvmar2n/24/
You can call a function which returns the id of the template in ng-include and use cached templates. The working example shows what you can do.
the function in your controller which handles the template looks like:
$scope.getTemplate = function(item) {
switch(item.type)
{
case "type1":
return 'testtype1.html';
default:
return 'testtype2.html';
}
}
and your html
<script type="text/ng-template" id="testtype1.html">
<p>This is the template 1</p>
</script>
<script type="text/ng-template" id="testtype2.html">
<p>This is the template 2</p>
</script>
<body ng-app="MyApp" ng-controller="ExampleController">
<div ng-repeat="item in items" class="someClass">
<!-- load a different template (partial) depending on the value of item.type -->
<div ng-include="getTemplate(item)"></div>
</div>
</body>
Create directive for that, something like:
app.directive('myDirective', function(){
return {
restrict: 'E',
scope: {item: '=item'},
templateUrl: function(element, attrs){
if (!attrs.type) return 'default.html';
return attrs.type + '.html';
}
}
});
Then you can create different templates like type1.html, type2.html...
And in controller you just do:
<my-directive ng-repeat="item in items" item="item", type="item.type">
Using ng-include lets you dynamically assign the source - so in your parent template you could have
<div ng-include src="templateName"></div>
where templateName is a variable name in your controller
$scope.templateName = 'path/to/my/template.html';
and changing this value within a digest should dynamically update the contents for you
Based on conditions you can load single or multiple templates as shown below.
With ng-switch
ng-if="item.type=='type2'||item.type=='type3'"
LoadMultipleTemplate To load multiple template based on your selections.
LoadSingleTemplate load single template.
Edit
With ng-include, this way you can load dynamic views.
in this example I've not put any condition. but within ng-repeat you can put another ng-repeat and based on inner ng-repeat you can do the stuff. But for inner ng-repeat you will have to make according json object.
loadViews
<div ng-repeat="item in example.items" class="someClass" >
<ng-include src="item.type + '.html'">{{item.type}}</ng-include>
</div>
flow:
List exists Inside Ng-View as a view called SelectCustomer.html
when a user clicks an A href link on my list inside SelectCustomer.html, route to my other view to be loaded inside the ng-view.
For some reason the route isn't being recognized. Below is the code.
App.js snippet:
.when('/CcxMain/Shared/CreateNewContact',
{
templateUrl: "/App/Shared/Views/CreateNewContact.html",
controller: "NewContactController"
})
.otherwise({ template: "this doesnt exist" });
SelectCustomer.Html snippet:
<div class="col-sm-3 col-md-3 col-lg-3" ng-show="showme">
<a href="/CcxMain/Shared/CreateNewContact">
<div class="odd-btn">
Create New Contact...
</div>
</a>
</div>
LogCase.cshtml snippet :
<div class="row">
<div class="">
<div ng-view class="view-animation">
</div>
</div>
</div>
When the a href is called it displays the default cant find route. No js errors in browser, any suggestions?
UPDATE: flushed the JS cache and now works...strange. However refreshing causes 404
I have controller and template views of that controllers.
ProductCtrl => Products.html
SomeCrtl => Some.html
FooCtrl => Foo.html
I have a ui-view on home page.
<html>
<body>
<div ui-view></div>
....
State config like this:
app.config(["$stateProvider", function ($stateProvider) {
$stateProvider.state("product", {
url: "/product",
templateUrl: "templates/Products.html",
controller: "ProductCtrl"
});
}])
My last view is appearing on ui-view when application started. But I want that ui-view should be empty. When I click a link then should view that content.
Try to wrap your ui-view with an HTML element, and manipulate hide it using ng-hide depending on the current state.
Code sample
<div ng-hide="$state.current.name === 'home'">
<div ui-view></div>
</div>
Another way to do what #bookmarker mentioned:
<div ng-hide="$state.includes('home')">
<div ui-view></div>
</div>
$state.includes('...') can be used to see if a state contains a specified state, that is, check if a child state contains a certain parent state.
I can't get my head wrapped around solving the following problem using angularJS.
I have a list view containing different kinds of data elements. Each element in itself is a view and has its own controller.
Now I want to iterate over this Array of the data items and based on recordType attribute, I want to initialize a controller with a template and finally add it to the list view.
At the moment I am using ng-include="item.recordType+'.html'" to dynamically load the template and the template itself has an ng-controller tag which loads the relevant controller. But I am not sure if this is the best approach.
<div class="data-item" ng-repeat="item in container.record_collection">
<div ng-include src="item.tRecordType + '.html'"></div>
</div>
Say record-type is apples
<script id="apples.html" type="text/ng-template">
<div ng-controller="ApplesController as apple">
<!-- ... HTML TEMPLATE ... -->
</div>
</script>
I've been trying to learn Ember.js for the last two weeks and I've really struggled. I'm hoping for an 'a-ha' moment but each new feature I try to implement always results in hours of failed testing. I just don't seem to be grasping the framework. I feel like I'm working against it. I'm hoping someone can explain a path forward through this simple example.
I am creating a web app that allows the user to pick products that they will sell to a client. There is a list of products they can chose from and then a list of products they've selected.
I imagine a left-column with navigation controls and a main column showing either the selected products or new products they can add to the order. Here is the basic template:
<script type="text/x-handlebars" data-template-name="pc">
<div id="nav">{{outlet nav}}</div>
<div id="main">{{outlet main}}</div>
</script>
Here is the left navigation template:
<script type="text/x-handlebars" data-template-name="nav">
<div class="button">{{#linkTo "pc.add"}}Add Products{{/linkTo}}</div>
</script>
Here is the selected products template:
<script type="text/x-handlebars" data-template-name="selectedProducts">
{{#each p in controller}}
<div class="product">
<h4>{{p.name}}</h4>
</div>
{{/each}}
</script>
Here is the available products template:
<script type="text/x-handlebars" data-template-name="addProducts">
<div id="addProducts" class="addProducts">
{{#each p in controller}}
<div class="product">
<h4>{{p.name}}</h4>
</div>
{{/each}}
<button {{action "addSelectedProducts"}}>Add Selected Products</button>
<button {{action "back"}}>Back</button>
</div>
</script>
I can load the 'pc' template with some already selected products. Great. I can also navigate to the 'Add Products' template. Great. But when I click 'Add Selected Products', I can't figure out how to move the selected products into the controller/model behind the 'Selected Products' template and then get that template to re-render in place of the 'Add Products template'. It's really two question. How do I update the model of another controller from within a different controller? And, how do I then transition from an event to another route?
Can someone show me how you would design the Route(s) and Controllers? I know that's asking a lot. I"m mostly interested in seeing how you respond to an event in the AppProductsController, update SelectedProductsController's model, and then transition to SelectedProductsRoute and have it re-render the template.
I want to believe this is an amazing framework but I just keep hitting walls.
Andrew
How do I update the model of another controller from within a different controller?
Connect controllers using the needs property. So something like:
//in AddProductsController
needs: ['selectedProducts']
addSelectedProducts: function() {
// Now selectedProductsController can be accessed via the controllers property
otherController = this.get('controllers.selectedProducts');
// add the selected ones...
}
See http://emberjs.com/guides/controllers/dependencies-between-controllers/
how do I then transition from an event to another route?
//in AddProductsController
this.transitionToRoute('blogPosts');
See http://emberjs.com/api/classes/Ember.Controller.html#method_transitionToRoute