I am another Angular JS newbie and have ran into a bit of an issue on how to resolve an Angular JS filter. Anyway here is the HTML of the IDEA of what I want to do. Basically I want to filter by a template that changes based on the the heading witch is also unknown. (As user would have to click link to get to this page and the header would get that certain name and the list would only display results that matches. I apologize, I do not know the technical terms and I am sure there is a simple fix but I do not know which way to take this.
<h1>{{item.name}}</h1>
<ul>
<li ng-repeat="item in items | filter:{category:'{{item.name'}}'">
I know this is not the way to approach this but this is the concept and would appreciate the help. It is hard to search for existing answers when some of the terms are so complex.
Related
newbie question.
I've read some of the W3Schools, I also read a lot from other sources on the internet, however I can't find what I need, and I'm sure it's quite simple to you.
I'm using ASP.Net, and I want to add to my website, multiple items, which every item hold a picture, and some other information, including links. I'm pretty sure I don't need to write the code for every item in the HTML source, and I don't know exactly how to implement my this.
The basic idea is that my items will be imported from a Database that I create in visual studio, and I want to style my webpage so they would appear in a certain formation, I thought I might need to use Javascript or CSS for this, hope I'm not mistaken.
Javascript isn't some sort of magician that will render all your stuff on its own. However, you can use it to attach a template to every of your items.
What you have to do is :
Create a base HTML template for 1 of your item that can be applied to all of them
Create a Javascript function that will attach thoses CSS classes and HTML attributes to every element out of your DB (or you could use a templating frameork .. since there's a lot of them I'll let you look for it on Google. It's pretty easy to use)
On page load or whatever event you want to bind on, you call your function which will attach the CSS and HTML to every element out of your DB and will render it on your page
Enjoy what you've done.
I hope this helps. Good luck ! ;)
Im learning Knockout.js through online tutorials, and even though I understand them I dont fully see how it makes things easier.
For example even though I understand this http://jsfiddle.net/rniemeyer/LkqTU/
this.firstName = ko.observable(first);
i dont see how its a significant improvement over something like this http://jsfiddle.net/rniemeyer/LkqTU/
function updateBox2() { var x=document.getElementById("first1");
document.getElementById('full').innerText = x.value}
but that was of course an extremely basic example. (The code samples here arent too good, better to check out the jsfiddle).
So my question is, does anyone have code examples whereby the first code performs an action using regular javascript and the second does the same but this time using knockoutjs and clearly shows how its a big improvement?
Rather than trying to compare vanilla JavaScript with KnockoutJS, I would try to understand how data-binding pattern simplifies client development.
Do you imagine your UI automatically reacting to a model change, and viceversa? Do you imagine that by just configuring the whole bindings?
With data-binding, your JavaScript will rarely need to manipulate the DOM, because the proper KnockoutJS binding will handle a lot of things for you and without your intervention.
Thus, you concentrate your efforts on manipulating the model as response to UI changes (invoked by KnockoutJS). And the UI changes automatically when you change the model.
For example, if you bind an observable array called items to a view like this:
<ol data-bind="foreach: items">
<li data-bind="text: $data"></li>
</ol>
...and you want to show 3 items in your view, it's just about doing so:
viewModel.items.push("Hello");
viewModel.items.push("world");
viewModel.items.push("!");
KnockoutJS adds new <li /> elements to your ordered list because the UI reacts to the whole items array changes.
Now try to use your mind, be formless and be like water, and I'm pretty sure you should be able to compare what extra-work would be required without using data-binding, and how many code lines may you save in a real-world project using this approach!
I'm using angular-ui-select2 to generate a select box.
By default, results displayed in select2 lists simply display a piece of text, but select2 provides a configuration option, formatResult from which one can return custom markup.
I'd like to use another directive I've written as part of the result markup.
This plnkr demonstrates a minimal use case. How can I get the projectLikesCount directive to be compiled and displayed properly within the dropdown?
I was trying to do the exact same but couldn't find a solution. It seems that the population of the results by formatResult is not in the angular lifecycle, therefore whatever markup returned by the function is displayed as is i.e., no directives will be "translated" into behaviour.
An example of this is that if you add the following markup:
<div ng-show='isNewElement'>Add new</div>
it will be rendered every time with no regard to the isNewElement value.
Considering the time this question has been unanswered I guess that it's either really easy or really complicated to achieve the desired behaviour. I'll post if I find a somewhat useful solution.
I am trying to add ui.bootstrap-typeahead support to my angular application but I can't seem to wrap my head around one specific problem I'm having. I want to be able to input a number and a unit in one word, say..
14tsps
Unfortunately I can't figure out a way to get typeahead to treat 'tsps' as a separate word in order to query for it. Even better would be if I could have the dropdown show the number as well. Does anyone with more experience than me have an idea on how to get this to work?
My code so far almost exactly resembles the example code on the site
$scope.selected = undefined;
and then my HTML
<input class="form-control" ng-model="selected" ui-keypress="{13: 'lineParse()'}" typeahead="word as word.name for word in words | filter:$viewValue | limitTo:8" >
<h3>{{selected}}</h3>
Another method I've considered is to somehow inject the number into a specified template and then filter the number out of the input before it's processed. Unfortunately I don't know enough about the inner-workings of typeahead for that.
I want to ask a better question here. Can anyone explain to me how ui-typeahead templating works?
On my site, I collect information on items in a game I play. I would like to implement some sort of custom search for the items that is both easier to use, and displays the result in a more aesthetic manner.
Currently, I use a wikidot site which allows tags to be assigned to pages and they can be searched, but searching multiple tags doesn't work as I would like. It will start the list with pages with all the tags, then pages that have one of the tags, and finally pages that just happen to have the tags in the body. Also, the results are presented as the page title, the first few lines of text from each page (without any line breaks making it hard to read), and finish with a link to the page. [See example: http://imgur.com/a/gyTtD#0 ] What I would like for the results are something like the following: http://imgur.com/a/gyTtD#1, which is an actual page from my site, but it's not dynamic, I must edit that page if I want to keep it up to date; and for any permutations of tags I want to create a page like that for, I need to first find all of the relevant items, organize them how I want, then make the page containing the includes for each of their individual pages (each item has its own page, I just put an [[include item-name]] wherever I want that item to show up on other pages, which just puts the body of the page in.
What I'm looking for is the best plan of action to make this happen. I'm familiar with HTML/CSS/JS, but not much other webdev related stuff. Is there a way I could have a page with a comma separated list that I could parse with JavaScript to search pages? Or if should I look elsewhere, what are some good tutorials or quality sources to read up on how to do this?
Thank you in advanced for any answers you can provide.
If you still require help with this, I'd suggest asking on the Wikidot community wiki instead, as there are more people able to help you with your question there (as you have a Wikidot site).
URL: http://community.wikidot.com/forum