Consider the following nested ng-repeat directives:
<tr ng-repeat="r in SomeExpr1">
<td ng-repeat="c in SomeExpr2">
<p>c index is {{$index}}, r index is {{???}}</p>
</td>
</tr>
How can I access the $index of the outer ng-repeat (i.e., the one in the parent scope that is hidden by the inner ng-repeat scope $index)?
As #Randal Schwartz pointed out in this post $parent does the trick.
<div ng-controller='demo-ctrl'>
<div ng-repeat="row in ctrl.matrix">
<div ng-repeat="column in row">
<span>outer: {{$parent.$index}} inner: {{$index}}</span>
</div>
</div>
</div>
You need ng-init from Angular.js. Sadly, that hasn't been ported yet, but it would look like this if it worked:
<script>
function Ctrl($scope) {
$scope.list = [['a', 'b'], ['c', 'd']];
}
</script>
<div ng-controller="Ctrl">
<div ng-repeat="innerList in list" ng-init="outerIndex = $index">
<div ng-repeat="value in innerList" ng-init="innerIndex = $index">
<span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
</div>
</div>
</div>
(via http://docs.angularjs.org/api/ng/directive/ngInit)
Related
I want to display data from 2 different tables which are stored in ViewBag at view side but I'm unable to print the data, I get an error
'object' does not contain a definition for 'Name'
The code at controller side
public ActionResult Packages()
{
int Prov_id = 1;
using (var db = new DataContex())
{
ViewBag.pack = db.Packages.Where(x => x.ProviderId == Prov_id).ToList();
ViewBag.service = db.GroupServices.Join(db.PackageServices,
gs => gs.ServiceId,
ps => ps.ServiceId,
(gs, ps) => new
{
name = gs.ServiceName
})
.ToList();
return View();
}
View markup:
#foreach (var item in ViewBag.pack)
{
<div class="col-md-6 bg-white mt-3">
<div class="card border package-grid p-3">
<div class="row">
<div class="col-md-8">
<input type="hidden" />
<h4 class="font-weight-bold py-2">#item.PackageName</h4>
#foreach (var item1 in ViewBag.service)
{
<h6 class="py-1">#item1.Name</h6>
}
<p class="py-3">#item.PackageDescription</p>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3 d-flex justify-content-between flex-wrap">
<p><strike> Rs. #item.PackagePrice</strike> <span>Rs. #item.PackageOfferPrice</span> </p>
<span>Remove</span>
</div>
</div>
</div>
</div>
}
That is because when you created ViewBag.service you have created anonymous object with property as name with n as LowerCase and at view side you are trying to use #item.Name as N as UpperCase.
Correct the property name and it will work.
I'm trying to get to grips with ViewComponents but having trouble trying to get the ViewComponent to reload on a button click. Whats the correct way to handle this?
Initially on the page loading it looks OK like this
In my controller I have
public IActionResult ReloadViewComponent(int characterRegionId, int materialTypeId)
{
return ViewComponent("MarketOrderComponent", new { characterRegionId, materialTypeId});
}
and in my razor view I'm passing parameters to the ReloadViewComponent method
<td><button class="btn btn-sm btn-outline-primary" value="#material.MaterialTypeID" onclick="location.href='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'">View</button></td>
full razor view
<body>
<div class="row" style="margin-top:5px;">
<div class="col-lg-4 col-md-12">
<div class="card" style="margin-bottom:0; ">
<div class="header" style="margin-bottom:55px;">
<h2 class="text-primary">Blueprint Breakdown</h2>
</div>
<div class="body">
<div>
<h5 class="text-center">#Model.BlueprintName</h5>
</div>
<div class="row text-center">
<div class="col-6 border-right pb-4 pt-4" style="padding-top:0px !important; padding-bottom:0px !important;">
<img src="#Model.ImageUrl" alt="#Model.BlueprintName">
</div>
<div class="col-6 pb-4 pt-4" style="padding-top:0px !important; padding-bottom:0px !important;">
<img src="#Model.ProductImageUrl" alt="#Model.BlueprintName">
</div>
</div>
<div class="text-center" style="margin-top:5px;">
<text style="font-size:small;">Material Quantity Based on Manufacturing Efficiency</text>
<br />
<text style="font-size:small;">Price Based on Lowest Region Market Sell Orders</text>
<br />
<text style="font-size:small;">Current Region is <span class="text-green">#Model.CharacterRegionName</span></text>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover table-custom spacing5">
<thead>
<tr>
<th></th>
<th>Material</th>
<th>Quantity</th>
<th>Price</th>
<th>Market</th>
</tr>
</thead>
<tbody>
#foreach (var material in Model.RequiredMaterials)
{
<tr class="text-cente" style="font-size:small;">
<td><img src="#(String.Format("{0}{1}{2}", "https://imageserver.eveonline.com/Type/", material.MaterialTypeID, "_32.png"))" /></td>
<td>#material.TypeName</td>
<td>#material.Quantity</td>
<td>#material.MaterialCost</td>
<td><button class="btn btn-sm btn-outline-primary" value="#material.MaterialTypeID" onclick="location.href='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'">View</button></td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
</div>
but when clicking the view button to reload the ViewComponent it is rendered like this.
Note by using the ViewComponent() controller method, your client only gets the component part of the view. So instead of changing the browser's current location, you should send an ajax request and dynamically replace the right side content.
Add an id='MarketOrderComponent'attribute so that we can reference this element later:
<div id='MarketOrderComponent' class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
And change the button click event handler to send an ajax request. For example, in order to reload the market order component, you can change your code as below:
<script>
function reload(url){
return $.ajax({
method:"get",
url:url,
success:function(resp){ $('#MarketOrderComponent').html(resp);},
});
}
</script>
<div class="card" style="margin-bottom:0; ">
...
</div>
<div class="table-responsive">
...
<tbody>
#foreach (var material in Model.RequiredMaterials)
{
<tr class="text-cente" style="font-size:small;">
<td><img src="#(String.Format("{0}{1}{2}", "https://imageserver.eveonline.com/Type/", material.MaterialTypeID, "_32.png"))" /></td>
<td>#material.TypeName</td>
<td>#material.Quantity</td>
<td>#material.MaterialCost</td>
<td>
<button class="btn btn-sm btn-outline-primary"
value="#material.MaterialTypeID"
onclick="var link='#Url.Action("ReloadViewComponent", "BlueprintBreakdown", new { Model.CharacterRegionId, material.MaterialTypeID })'; event.preventDefault(); reload(link)"
>
View
</button>
</td>
</tr>
}
</tbody>
...
</div>
<div id='MarketOrderComponent' class="col-lg-8 col-md-12">
#await Component.InvokeAsync("MarketOrderComponent", new { Model.CharacterRegionId, Model.RequiredMaterials.First().MaterialTypeID })
</div>
I have a document type with alias dArticlesMain, and for this page I have the following structure.
dArticlesMain
dArticlesCategory1
Article1
Article2
Article3
dArticlesCategory2
Article1
Article2
Article3
dArticlesCategory3
Article1
Article2
Article3
I'm on dArticlesMain and i want to display all the descendants (Articles) and skip it's childrens (dArticlesCategory)
I have this code which display all the childrens (dArticlesCategory) and the descendants (Articles) also when i use the Article properties it's through an error.
<ul>
#foreach(var page in Model.Content.Descendants())
{
<li>#page.Name</li>
}
</ul>
I have got this code but i can't display by Article properties like articleText or articleImage.
<ul>
#foreach(var page in Model.Content.DescendantsOrSelf().OfTypes("Article"))
{
<li>#page.Name</li>
}
</ul>
I have figured it out, and here's my code...
#{
var rootNode = CurrentPage.AncestorOrSelf(1);
var articlesParent = rootNode.Children("dArticlesMain").FirstOrDefault();
<div class="row">
#foreach (var article in articlesParent.Descendants("article").Where("Visible").RandomOrder())
{
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<a href="#article.Url">
<img src="#article.articlePhoto" alt="#article.articleName" />
</a>
<div class="caption">
<a class="h4" href="#article.Url">#article.articleName</a>
#Umbraco.Truncate(article.articleFullText, 100)
</div>
</div>
</div>
}
</div>
}
I am new to ember. I have two divs with a select box each. I want the second div to toggle based on the change in the first select box value.
First DIV with select box:
<div class="row row-space">
<div class="col-sm-10">
<div class="input-group input-group-sm">
<span class="input-group-addon edit_schedule_label" id="sizing-addon3">Schedule Level</span>
<div class="recurrence_box">
{{view "select" content=schedule_levels optionValuePath="content.value" optionLabelPath="content.label" selection="default_schedule_level.value" value="default_schedule_level.value" selectionBinding="default_schedule_level"}}
</div>
</div>
</div>
</div>
Second DIV:
{{#if group_level_decider }}
<div class="row row-space">
<div class="col-sm-10">
<div class="input-group input-group-sm">
<span class="input-group-addon edit_schedule_label" id="sizing-addon3">Location </span>
<div class="recurrence_box">
{{view "select" content=schedule_levels optionValuePath="content.value" optionLabelPath="content.label" selection="default_schedule_level.value" value="default_schedule_level.value" selectionBinding="default_schedule_level"}}
</div>
</div>
</div>
</div>
{{/if}}
In Controller, I am observing the change in selection binding of the first select box and setting the condition to toggle for the second div. I can see the condition variable here "group_level_decider" getting set to the correct value but it is not reflecting in the view.
Controller:
group_level_decider : false,
schedule_level_changed: function() {
var model = this.get('store');
model.set('selected_schedule_level',this.get('default_schedule_level.value'))
model.set('group_level_decider',true)
}.observes('default_schedule_level')
Please help me. Thanks!
Here is an example of filtering out cities based on a state:
App.IndexController = Ember.ArrayController.extend({
cities: function(){
var state = this.get('state');
var states = this.get('model');
var cities = [];
if(state){
cities = states.filterBy('state', state).get(0).get('cities');
}
return cities;
}.property('state'),
states: function(){
return this.get('model').mapBy('state');
}.property(),
stateObserver: function(){
this.set('city', null);
}.observes('state')
});
Then, inside your template:
States: {{view "select" prompt="Pick State..." content=states value=state}}
Cities: {{view "select" prompt="Pick City..." content=cities value=city }}
Working solution here
I have a jquery accordion in mvc view. It works fine for one row but will not display foreach row in the table. can't see why as it is contained within the foreach statement.
#Scripts.Render#if ("~/jquery")
#StylesModel.Render("~/Content/css"Isproject)
<link{ href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function () {
$("#accordion").accordion({
<div class="table">
<div>collapsible: true </div>
});<div>
});
</script>
#if (Model.Isproject)
{
<div class="table">
<div>
</div>
<div>
<table class="name" style="border-spacing: 0 8px; border-collapse: separate;">
#foreach (var item in Model.project)
{
#:<tr style="background-color:grey;-moz-border-radius: 15px;border-radius: 15px;">
<td class="position">
#item["post"]
</td>
<td class="image">
<img src="#item["image"]" style="height: 37px; width: 37px"/>
</td>
<td style="width: 50%;padding-left: 10px;text-align: left;">
<div id="accordion">
#item["name"]
<p>Content in dropdown</p>
</div>
</td>
<td style="width: 10%; text-align: center">
#item["rate"]
</td>
#:</tr>
}
</table>
</div>
</div>
}
So in brief I need the jquery working for each entry/row and not just the first entry/row.
so when you do this $("#accordion").accordion, it will pick the first element with the id accordion and inject accordion properties and markup to it, rest will be ignored.
And, in your foreach loop, you are assigning same id to each of the div inside that particular td i.e. <div id="accordion">, which is wrong.
try assigning a unique id or instead of id use class i.e. <div class="myaccordion"> and in your jQuery code above do this, $(".myaccordion").accordion
and also the correct syntax to initialize the accordion will be:
$( ".accordion" ).accordion({
collapsible: true
});
and not what you have right now(I will consider that as typo). Also correct way of doing multiple sections inside your accordion is this:
<div id="accordion">
<h3>Section 1</h3>
<div>
<p> this is section 1</p>
</div>
<h3>Section 2</h3>
<div>
<p>this is section 2</p>
</div>
<h3>Section 3</h3>
<div>
<p>this is section 3</p>
</div>
</div>
so basically, you need to reconstruct your foreach loop, keeping the main accordion div outside and repeating the sections only