I want to create tab dynamically with iterative for each as bellow, but its creating space like tab-btn 1, tab-btn 2. How to iterate for class name.
<li>
View Document - 01
</li>
<li>
View Document - 02
</li>
<li>
View Document - 03
</li>
<li>
View Document - 04
</li>
I have created for loop as bellow,
#{int i = 0;}
#foreach (System.Data.DataRow item in ds.Tables[0].Rows)
{
<li>
#item["M36_01_TypeName"]
</li>
i++;
}
I have also tried as suggest in excepted answer of Razor - using foreach, insert html every nth item but its also not working.
You could use string.Format()
<a href="javascript:void(0);" class=#string.Format("tab-btn{0}", i)>#item["M36_01_TypeName"]</a>
Related
I have a list like this
<ul>
<li *ngFor="let product of items.Products| slice 0:3 ; let i = index">
{{ product?.ProductsDescription}}
<li>
</ul>
All i want i to is, display a list of products, but i wan't to limit the exibition to only 3 products, and below, in another <li></li> display "And more {{ quantity-left-of-products }}"
Example:
I Have 6 products, so it would display:
Item 1
Item 2
Item 3
And more 3
Something like this:
In my knowledge i would have to find a way to access the index property outside the ngFor.
Can anyone help me?
You can achieve what you want without accessing the index value outside the context.
Create a variable in TS to use it as a parameter in the slice pipe.
sliceValue = 3;
loadMore() {
this.sliceValue = items.Products.length;
}
Template:
<ul>
<li *ngFor="let product of items.Products| slice 0:sliceValue ; let i = index">
{{ product?.ProductsDescription}}
<li>
<li (click)="loadMore()" *ngIf="items.Products.length > sliceValue">And more {{items.Products.length - sliceValue}}</li>
</ul>
Use *ngIf for displaying the "And More" when necessary. When the user clicks on "And More" the <li> for "And More: hides and the rest of the list loads.
Is there any way to do this:
<h1>Topology</h1>
<ul><li> Parent Directory</li>
<li> File1.mp4</li>
<li> File2.mp4</li>
<li> File3.mp4</li>
<li> File4.mp4</li>
<li> File5.mp4</li>
<li> File6.mp4</li>
<li> File7.mp4</li>
<li> File8.mp4</li>
<li> File9.mp4</li>
<li> File10.mp4</li>
</ul>
JSFiddle: https://jsfiddle.net/wagyox71/
Is there any way to do this without listing every single file separately?
You can do this with JavaScript.
Create a div for the list, then use a script and an array to populate the div.
The div: <div id="myLinks"></div>
var links = [' Parent Directory', ' File1.mp4', 'File2.mp4', 'etc'];
var ul = document.createElement('ul');
document.getElementById('myLinks').appendChild(ul);
links.forEach(function(name){
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML += name;
});
You can manually populate the links array, or do it dynamically from a directory on the site via some other call.
I have a todo list and I want to show each item in a "li" tag. And in this tag, i also want to add a link X to be able to delete the item. But I got an error:
org.xml.sax.SAXParseException: The value of attribute "th:text" associated with an element type "li" must not contain the '<' character.
Here is the code that got the error:
<li th:each="todoitem : ${todolist}" th:text="${todoitem.text} + <a href='#' class='close' aria-hidden='true'>×</a>" th:attr="data-value=${todoitem.id}" ></li>
I also tried like this, also did not work:
<li th:each="todoitem : ${todolist}" th:text="${todoitem.text}" th:attr="data-value=${todoitem.id}"><a href='#' class='close' aria-hidden='true'>×</a></li>
The code that I am trying to generate is like this:
<li data-value="0">text of todo list ×</li>
So how can I make a loop that can also add the link into the li tag?
One option is to use a <span> to render the text.
So from your second attempt, i.e.
<li th:each="todoitem : ${todolist}" th:text="${todoitem.text}" th:attr="data-value=${todoitem.id}"><a href='#' class='close' aria-hidden='true'>×</a></li>
move the th:text into a new <span>
<li th:each="todoitem : ${todolist}" th:attr="data-value=${todoitem.id}">
<span th:text="${todoitem.text}" th:remove="tag"></span>
<a href='#' class='close' aria-hidden='true'>×</a>
</li>
You could also use th:inline="text" as explained here.
On my website, I want to make a navigation bar just like this, with categories (here 2012) and articles (here May - October). I've got a JSON object with all categories (id, name) and one with all articles (id, title, body, category), which angular gets for me.
The current HTML is as follows:
<!-- The angular controllers are already initialized before this piece of code -->
<div class="menubar">
<ul>
<li class="cat" ng-repeat="infocategory in info.infocategories">
{{infocategory.name}}
<ul>
<li class="arti" ng-repeat="infoentry in info.infoentries">
<!-- The link links to a function that sets the correct tab -->
<a href ng-click="tab.setTab({{infoentry.id}})">{{infoentry.title}}</a>
</li>
</ul>
</li>
</ul>
</div>
And the JavaScript:
app.controller('InfoController', ['$http', function($http){
var info = this;
info.infocategories = [];
info.infoentries = [];
// This all works correctly
$http.get(api + 'info_categories?pageSize=20&pageNumber=1').success(function(data){
info.infocategories = data.data;
});
$http.get(api + 'info_posts?pageSize=20&pageNumber=1').success(function(data){
info.infoentries = data.data;
});
}]);
However, as you can imagine, this code displays all entries under the categories, but I want only the entries that belong to the specific category to be displayed.
I'm relatively new to AngularJS, so any help is greatly appreciated. If there's any code lacking or unclear, please tell me. Thanks in advance!
Never mind, I already fixed it myself. I guess I was thinking too difficult...
<div class="menubar">
<ul>
<li class="cat" ng-repeat="infocategory in info.infocategories">
{{infocategory.name}}
<ul>
<li class="arti" ng-repeat="infoentry in info.infoentries" ng-show="infoentry.cat == infocategory.id">
<a href ng-click="tab.setTab(infoentry.id)">{{infoentry.title}}</a>
</li>
</ul>
</li>
</ul>
</div>
VS2013, VB, MVC5, html
These posts (multiple submits, which button is pressed) show nicely how to use multiple < input > elements in a single form. This is nice for including a similar command at the end of each line in a list.
I want to have a page that lists multiple lines and has the same < input > elements at the end of each line. When a specific < input > is clicked, it must return to the 'controller method' information specific to that line and relevant to which link was clicked. So my display will look something like this:
This is line1 LINK1 | LINK2 | LINK3
This is line2 LINK1 | LINK2 | LINK3
This is line3 LINK1 | LINK2 | LINK3
The user will click on LINK1, LINK2, or LINK3 to accomplish some operation on line1, line2, or line3 based on which LINK is clicked. The actions might be something like Edit, Delete, List Users, etc.
The controller method will need data specific to the line on which the LINKs are clicked such as record ID, type of record, and so on just as an example. It could be the line was formed from multiple tables with different ID's; I'm just trying to establish that more than one piece of information is required in the transfer of control.
Can I provide multiple pieces of different data for each LINK, and how? I've only seen and learned how to get information back to the controller from the element by checking if the "ID" attribute is empty or not, and then capturing the data in the "Value" attribute per this post also linked above.
Is there a way to setup an element so that I can read other data from that specific element? The information has to be particular to that button and that line, meaning not something that is an overall form attribute.
Perhaps it is not possible by design, but I won't know if I don't ask.
Why don't you add as many forms as lines do you have?
Something like:
<table>
#foreach (obj item in Model)
{
#using (Html.BeginForm())
{
<tr>
<td>
// your inputs and buttons here
</td>
</tr>
}
}
<table>
This way each form will only POST data relevant to your line.
you could go further than below with some ajax but this will do the trick and allow you to use multiple values from each "link" in each "row"
#using (Html.BeginForm())
{
#Html.Hidden("myType", "")
#Html.Hidden("myID","")
}
This is line1 <a class="action-link" href="#" data-type="typeA" data-id="1">Link 1</a> | <a class="action-link" href="#" data-type="typeA" data-id="2">Link 2</a> | <a class="action-link" href="#" data-type="typeA" data-id="3">Link 3</a>
This is line2 <a class="action-link" href="#" data-type="typeB" data-id="1">Link 1</a> | <a class="action-link" href="#" data-type="typeB" data-id="2">Link 2</a> | <a class="action-link" href="#" data-type="typeB" data-id="3">Link 3</a>
etc....
<script>
$(document).ready(function() {
$(".action-link").on("click", function(e) {
e.preventDefault();
var myType = $(this).attr("data-type");
var myID = $(this).attr("data-id");
//you could do some validation here...
$("#myType").val(myType);
$("#myID").val(myID);
$("form:first").submit();
});
});
</script>